import {useMutation} from '@tanstack/react-query';
import Layout from "../components/layout/Layout"
import Link from "next/link"
//import {Form, Formik} from 'formik';
//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>
                                <div className="row d-flex align-items-center">
                                    {/* IMAGE BLOCK */}
                                    <div className="col-md-6 col-lg-6">
                                        <div className="img-block left-column wow fadeInRight">
                                            <img className="img-fluid" src="/images/img-14.png" alt="content-image"/>
                                        </div>
                                    </div>

                                    <div className="col-md-6 col-lg-6">
                                        <div className="form-holder">
                                            <div
                                                initialValues={initialValues}
                                                validationSchema={validationSchema}
                                                onSubmit={handleContactMutation}
                                            >
                                                {(props) => {
                                                    return (
                                                        <div 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 can best determine hot to handle 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 or account'>Registering or
                                                                        Accounts
                                                                    </option>
                                                                    <option value='using application'>Application
                                                                    </option>
                                                                    <option value='troubleshooting'>Troubleshooting
                                                                    </option>
                                                                    <option value='data and files'>Data or Files
                                                                    </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 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>Details like yur Your OS version, browser and any specific steps will really help. 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="d-flex justify-content-end mt-15 form-btn">
                                                                <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>
                                                        </div>
                                                    );
                                                }}
                                            </div>
                                        </div>
                                        {/*</div>*/}
                                    </div>
                                </div>
                                {/* End row */}
                            </div>


                            {/*<div className="row justify-content-center">*/}
                            {/*    <div className="col-md-11 col-lg-10 col-xl-8">*/}

                            {/*    </div>*/}
                            {/*</div>	   */}
                        </div>
                        {/* End container */}
                    </section>
                    {/* END CONTACTS-1 */}
                    {/* DIVIDER LINE */}
                    <hr className="divider"/>
                    {/* NEWSLETTER-1
			============================================= */}

                </div>

            </Layout>
        </>
    )
}