import { useMutation } from '@tanstack/react-query';
import Layout from "../components/layout/Layout"
import Link from "next/link"
import { Form, Formik } from 'formik';
import * as Yup from "yup";
export default function Home() {

    const validationSchema = Yup.object().shape({
        subject: Yup.string().required("Required"),
        name: Yup.string().required("Required"),
        email: Yup.string().required("Required"),
        message: Yup.string().required("Required"),
    })

    const initialValues = {
        subject: '',
        name: '',
        email: '',
        message: ''
    };

    const contactMutation = useMutation({
        mutationFn: (fields) => {
            return null //completePWDReset(fields)
        },
        onSuccess: (res) => {
            if(res?.data?.resultCode != '0'){
                throw({message: res?.data?.resultDescription})
            }
        },
        // onError: (err) => {
        //     console.log('err', err)
        // }
  })
  
  const handleContactMutation = (values) => {
    let reqData = {
        ...values
    }
    console.log(reqData)
    setTimeout(()=>{
        contactMutation.reset()
    },3000)
    // contactMutation.mutate(reqData)
  }

    return (
        <>
            <Layout headerStyle={1} footerStyle={3} headerCls="navbar-dark inner-page-header">
                <div>
                    <section id="contacts-1" className="pb-50 inner-page-hero contacts-section division">
                        <div className="container">
                            {/* SECTION TITLE */}
                            <div className="row justify-content-center">
                                <div className="col-md-10 col-lg-9">
                                    <div className="section-title text-center mb-80">
                                        {/* Title */}
                                        <h2 className="s-52 w-700">Questions? Let's Talk</h2>
                                        {/* Text */}
                                        <p className="p-lg">Want to learn more about MERMS, get a quote, or speak with an expert?
                                            Let us know what you are looking for and we’ll get back to you right away
                                        </p>
                                    </div>
                                </div>
                            </div>
                            {/* CONTACT FORM */}
                            <div className="row justify-content-center">
                                <div className="col-md-11 col-lg-10 col-xl-8">
                                    <div className="form-holder">
                                        <Formik
                                            initialValues={initialValues}
                                            validationSchema={validationSchema}
                                            onSubmit={handleContactMutation}
                                        >
                                            {(props) => {
                                            return (
                                                <Form name="contactform" className="row contact-form">
                                                    {/* Form Select */}
                                                    <div className="col-md-12 input-subject">
                                                        <p className="p-lg">This question is about:{(props.errors.subject && props.touched.subject) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.subject}</span>}</p>
                                                        <span>Choose a topic, so we know who to send your request to: </span>
                                                        <select name='subject' onChange={props.handleChange} className="form-select subject" aria-label="Default select example">
                                                            <option value=''>This question is about...</option>
                                                            <option value='registering/authorising'>Registering/Authorising</option>
                                                            <option value='using application'>Using Application</option>
                                                            <option value='troubleshooting'>Troubleshooting</option>
                                                            <option value='backup/restore'>Backup/Restore</option>
                                                            <option value='others'>Other</option>
                                                        </select>
                                                    </div>
                                                    {/* Contact Form Input */}
                                                    <div className="col-md-12">
                                                        <p className="p-lg">Your Name:{(props.errors.name && props.touched.name) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.name}</span>}</p>
                                                        <span>Please enter your real name: </span>
                                                        <input type="text" onChange={props.handleChange} name="name" className="form-control name" placeholder="Your Name*" />
                                                    </div>
                                                    <div className="col-md-12">
                                                        <p className="p-lg">Your Email Address:{(props.errors.email && props.touched.email) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.email}</span>}</p>
                                                        <span>Please carefully check your email address for accuracy</span>
                                                        <input type="text" onChange={props.handleChange} name="email" className="form-control email" placeholder="Email Address*" />
                                                    </div>
                                                    <div className="col-md-12">
                                                        <p className="p-lg">Explain your question in details:{(props.errors.message && props.touched.message) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.message}</span>}</p>
                                                        <span>Your OS version, MERMS version &amp; build, steps you did. Be VERY precise!</span>
                                                        <textarea onChange={props.handleChange} className="form-control message" name="message" rows={6} placeholder="I have a problem with..." />
                                                    </div>
                                                    {/* Contact Form Button */}
                                                    <div className="col-md-12 mt-15 form-btn text-right">
                                                        <button 
                                                            type="submit" 
                                                            className="btn btn--theme hover--theme submit"
                                                            disabled={contactMutation.isPending || contactMutation.isSuccess}
                                                        >
                                                           {contactMutation.isPending ? 'Sending' : contactMutation.isSuccess ? 'Message Sent' : 'Submit Request'}
                                                        </button>
                                                    </div>
                                                    <div className="contact-form-notice">
                                                        <p className="p-sm">We are committed to your privacy. MERMS uses the information you
                                                            provide us to contact you about our relevant content, products, and services.
                                                            You may unsubscribe from these communications at any time. For more information,
                                                            check out our <Link href="/privacy">Privacy Policy</Link>.
                                                        </p>
                                                    </div>
                                                    {/* Contact Form Message */}
                                                    <div className="col-lg-12 contact-form-msg">
                                                        <span className="loading" />
                                                    </div>
                                                </Form>
                                            );
                                            }}
                                        </Formik>
                                    </div>
                                </div>
                            </div>	   {/* END CONTACT FORM */}
                        </div>	   {/* End container */}
                    </section>	{/* END CONTACTS-1 */}
                    {/* DIVIDER LINE */}
                    <hr className="divider" />
                    {/* NEWSLETTER-1
			============================================= */}

                </div>

            </Layout>
        </>
    )
}