import React, { useState } from "react";
import { useForm } from "react-hook-form"
import InputMask from 'react-input-mask';
import { EmailValidation } from "../Utils/ValidationRules";
import submitForm from "../Services/submitForm";

import Button from "./UI/Button";
import Input from "./UI/Input";
import Textarea from "./UI/Textarea";
import SubmitFormModal from "./Modals/SubmitFormModal";

const Contact = ({white, ...props}) => {
    const [modal, setModal] = useState(false);
    const [error, setError] = useState(false);
    const { register, handleSubmit, setValue, watch, formState: { isSubmitting, errors } } = useForm()
    const onSubmit = async (data) => {
        const status = await submitForm(data);
        status === 200 ? setError(false) : setError(true);
        setModal(true);
    }
    return (
        <section {...props} className={white ? 'py-32 max-md:py-16' : 'py-32 max-md:py-16 bg-[#0E0808]'}>
            <form onSubmit={handleSubmit(onSubmit)} className="container mx-auto px-24 max-md:px-3">
                <h2 className={white ? 'text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-slate-800 text-center uppercase' : 'text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-white text-center uppercase'}>Связаться с нами</h2>
                <div className="flex max-md:flex-col mb-10 max-md:mb-8">
                    <div className="flex flex-col basis-[40%] mr-6 max-md:mr-0">
                        <Input type="text" register={register} errors={errors} validation={{required: "Поле должно быть заполнено"}} name="fio" labelClasses={white ? '!text-black' : null} wrapperClasses='mb-5' className={white ? 'border-2 !border-slate-700' : null} label='Ваше ФИО:' placeholder='Иванов Иван Иванович'></Input>
                        <Input type="text" register={register} errors={errors} validation={EmailValidation} name="email" labelClasses={white ? '!text-black' : null} wrapperClasses='mb-5' className={white ? 'border-2 !border-slate-700' : null} label='Ваш Email:' placeholder='exampel@yandex.ru'></Input>
                        
                        <InputMask mask="+7 (999) 999 99 99" value={watch("phone", false)} onChange={e=> setValue("phone", e.target.value)}>
                            {() => <Input type="phone" register={register} errors={errors} validation={{required: "Поле должно быть заполнено"}} name="phone" labelClasses={white ? '!text-black' : null} wrapperClasses='max-md:mb-5' className={white ? 'border-2 !border-slate-700' : null} label='Ваш телефон:' placeholder='+7 (999) 999 99-99'></Input>}
                        </InputMask>
                        
                    </div>
                    <div className="flex basis-[60%]">
                        <Textarea register={register} errors={errors} name="message" labelClasses={white ? '!text-black' : null} className={white ? 'h-full resize-none border-2 !border-slate-700' : 'h-full resize-none'} label='Ваше обращение:' placeholder='Обращение...'></Textarea>
                    </div>
                </div>
                <div className="flex justify-center">
                    <Button disabled={isSubmitting}>Отправить форму</Button>
                </div>
            </form>
            <SubmitFormModal modal={modal} setModal={setModal} error={error}/>
        </section>
    )
}

export default Contact;