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";
import { useTranslations } from "next-intl";

import { sendContactMsg } from "../components/services/services";

export default function Home() {
    const t = useTranslations("ContactsPage")

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

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

    const contactMutation = useMutation({
        mutationFn: (fields) => {
            return sendContactMsg(fields)
        },
        onSuccess: (res) => {
            // if (res?.data?.resultCode != '0') {
            //     throw({message: res?.data?.resultDescription})
            // }
            window.scrollTo(0, 0);
        },
        // onSettled: () => {
        //     setTimeout(() => {
        //         contactMutation.reset()
        //     }, 3000)
        // }
        // onError: (err) => {
        //     console.log('err', err)
        // }
    })

    const handleContactMutation = (values) => {
        let reqData = {
            ...values
        }
        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">
                                        <h2 className="s-52 w-700">{t("title")}</h2>
                                        <p className="p-lg">{t("description")}</p>
                                    </div>
                                </div>
                            </div>
                            {/* CONTACT FORM */}

                            <div>
                                <div className="row d-flex align-items-start">
                                    {/* IMAGE BLOCK */}
                                    <div className="col-md-6 col-lg-6">
                                        <div className="img-block left-column wow fadeInRight">
                                            <img className="img-fluid" src="/images/contact-us-page.png" alt="content-image"/>
                                        </div>
                                    </div>
                                    

                                    <div className="col-md-6 col-lg-6">
                                        <div className="form-holder">
                                            <Formik
                                                initialValues={initialValues}
                                                validationSchema={validationSchema}
                                                onSubmit={handleContactMutation}
                                            >
                                                {(props) => {
                                                    return (
                                                        <Form name="contactform" className="row contact-form">
                                                            {/* Form Select */}
                                                            {contactMutation.isSuccess ?
                                                            <div className='w-100 text-center'>
                                                                <p className='p-lg' style={{lineHeight: '30px'}}>
                                                                    Thank you for reaching out to us. We have received your message and will treat it with utmost urgency. Our team will respond to you as soon as possible.
                                                                </p>
                                                                <div className="d-flex justify-content-center mt-15" style={{marginTop: '80px'}}>
                                                                    <Link href="/" className="btn btn--theme hover--theme submit">
                                                                        Return Home
                                                                    </Link>
                                                                </div>
                                                            </div>
                                                            :contactMutation.isError ?
                                                            <div className='w-100 text-center'>
                                                                <p className='p-lg' style={{lineHeight: '30px', color: 'red'}}>
                                                                    Opps! An error occured, please try again.
                                                                </p>
                                                                <div className="d-flex justify-content-center mt-15" style={{marginTop: '80px'}}>
                                                                    <button onClick={()=>contactMutation.reset()} type='button' className="btn btn--theme hover--theme submit">
                                                                        Resend Message
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            :
                                                            <>
                                                            <div className="col-md-12 input-subject">
                                                                <p className="p-lg">{t("questionAbout")}{(props.errors.subject && props.touched.subject) &&
                                                                        <span style={{display: 'inline'}} className='text-danger'>{props.errors.subject}</span>}</p>
                                                                <span>{t("chooseTopic")}</span>
                                                                <select name='subject' onChange={props.handleChange}
                                                                        className="form-select subject"
                                                                        aria-label="Default select example">
                                                                    <option value=''>{t("selectDefault")}</option>
                                                                    <option value='registering or account'>{t("optionRegistering")}</option>
                                                                    <option value='using application'>{t("optionApplication")}</option>
                                                                    <option value='troubleshooting'>{t("optionTroubleshooting")}</option>
                                                                    <option value='data and files'>{t("optionData")}</option>
                                                                    <option value='others'>{t("optionOther")}</option>
                                                                </select>
                                                            </div>
                                                            <div className="col-md-12">
                                                                <p className="p-lg">{t("nameLabel")}{(props.errors.name && props.touched.name) &&
                                                                        <span style={{display: 'inline'}} className='text-danger'>{props.errors.name}</span>}</p>
                                                                <span>{t("namePlaceholder")}</span>
                                                                <input type="text" onChange={props.handleChange}
                                                                       name="name" className="form-control name"
                                                                       placeholder={t("nameInput")}/>
                                                            </div>
                                                            <div className="col-md-12">
                                                                <p className="p-lg">{t("emailLabel")}{(props.errors.email && props.touched.email) &&
                                                                        <span style={{display: 'inline'}} className='text-danger'>{props.errors.email}</span>}</p>
                                                                <span>{t("emailPlaceholder")}</span>
                                                                <input type="text" onChange={props.handleChange}
                                                                       name="email" className="form-control email"
                                                                       placeholder={t("emailInput")}/>
                                                            </div>
                                                            <div className="col-md-12">
                                                                <p className="p-lg">{t("messageLabel")}{(props.errors.message && props.touched.message) &&
                                                                        <span style={{display: 'inline'}} className='text-danger'>{props.errors.message}</span>}</p>
                                                                <span>{t("messagePlaceholder")}</span>
                                                                <textarea onChange={props.handleChange}
                                                                          className="form-control message"
                                                                          name="message" rows={6}
                                                                          placeholder={t("messageInput")}/>
                                                            </div>
                                                            <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 ? t("sending") : contactMutation.isSuccess ? t("messageSent") : t("submitRequest")}
                                                                </button>
                                                            </div>
                                                            </>
                                                            }
                                                            <div className="contact-form-notice">
                                                                <p className="p-sm">{t("privacy")}</p>
                                                            </div>

                                                            {/* Contact Form Message */}
                                                            <div className="col-lg-12 contact-form-msg">
                                                                <span className="loading"/>
                                                            </div>
                                                        </Form>
                                                    );
                                                }}
                                            </Formik>
                                        </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>
        </>
    )
}
export async function getStaticProps({ locale }) {
  const { getMessages } = await import('../utils/getMessages')
  return {
    props: {
      locale,
      messages: await getMessages(locale),
    }
  }
}