'use client'

import { postDataSuggestion } from "@/actions/pageYourSuggestionAction";
import { Input } from "@/components/Input";
import MaskedInputField from "@/components/InputMask";
import { onlyNumbers } from "@/utils/functions";
import { maskCPF } from "@/utils/functions/Masks";
import { Form, Formik } from "formik";

import { IoChevronForward } from "react-icons/io5";
import { toast } from "react-toastify";
import * as Yup from 'yup';
import sanitizeHtml from 'sanitize-html';


const initialData = {
    Nome: '',
    NomePet: '',
    Documento: '',
    MotivoContato: '',
    Observacao: '',
    Email: ''
};

export default function YourSuggestion() {

    const validationFormUserSchema = Yup.object({
        Nome: Yup.string().required('Campo obrigatório'),
        Email: Yup.string()
            .email('Preencha o campo com um e-mail válido')
            .required('O campo obrigatório'),
    });

    const handleSendContact = async (e: any, resetForm: () => void) => {

        if (!sanitizeHtml(e.Nome) || !sanitizeHtml(e.NomePet) || !sanitizeHtml(e.MotivoContato) || !sanitizeHtml(e.Observacao) || !sanitizeHtml(e.Email)) {
            toast.error('Preencha os campos obrigatórios corretamente.')
            return;
        }

        try {
            const data = {
                Nome: sanitizeHtml(e.Nome),
                NomePet: sanitizeHtml(e.NomePet),
                Documento: onlyNumbers(e.Documento),
                MotivoContato: sanitizeHtml(e.MotivoContato),
                Observacao: sanitizeHtml(e.Observacao),
                Email: sanitizeHtml(e.Email),

                Local: 2
            };

            let response = await postDataSuggestion(data);
            if (response.Id) {
                toast.success('Dados enviados com sucesso.')
                resetForm();
            }

            Promise.resolve({});
        } catch (e) {
            toast.error('Erro ao enviar dados, verifique os campos acima.');
            Promise.resolve({ e });
        }
    };

    return (
        <section className="container mx-auto p-4 md:p-8">
            <div className="lg:flex lg:justify-between lg:items-start">
                <div className="md:mb-10 mt-6 lg:mb-0 lg:w-1/2">

                    <p className="text-[15px]"> Suporte
                        <span className="mx-4"><IoChevronForward className="inline" size={20} /></span> Dúvidas e Sugestões </p>

                    <h1 className="text-[50px] md:text-[56px] font-bold text-[--primary] leading-11 mt-5">DEIXE A SUA</h1>
                    <h1 className="text-5xl md:text-[56px] font-bold text-[--secundary]">SUGESTÃO</h1>
                    <p className="text-[--text-color] mt-4">
                        Preencha o formulário ao lado e nossa equipe receberá seu contato.
                    </p>
                </div>

                <div className="lg:w-1/2 md:px-8 md:pt-6 pb-8 mb-4">
                    <Formik
                        onSubmit={(values, { resetForm }) => handleSendContact(values, resetForm)}
                        enableReinitialize
                        validationSchema={validationFormUserSchema}
                        validateOnChange={true}
                        validateOnBlur={true}
                        initialValues={{ ...initialData }}
                    >
                        {({ errors, values }) => {

                            return (
                                <Form className="space-y-4 mt-4">

                                    <Input
                                        placeholder="Nome"
                                        name="Nome"
                                        value={values.Nome}
                                        error={errors ? (errors.Nome as string) : ''}
                                        style={{ 'border': 'none' }}
                                    />

                                    <MaskedInputField
                                        placeholder="CPF"
                                        name="Documento"
                                        value={values.Documento}
                                        error={errors ? (errors.Documento as string) : ''}
                                        mask={maskCPF}
                                        label={"CPF"}
                                    />

                                    <Input
                                        placeholder="E-mail"
                                        name="Email"
                                        type="email"
                                        value={values.Email}
                                        error={errors ? (errors.Email as string) : ''}
                                        style={{ 'border': 'none' }}
                                    />

                                    <Input
                                        placeholder="Nome do Pet"
                                        name="NomePet"
                                        value={values.NomePet}
                                        error={errors ? (errors.NomePet as string) : ''}
                                        style={{ 'border': 'none' }}
                                    />

                                    <Input
                                        placeholder="Motivo do Contato"
                                        name="MotivoContato"
                                        value={values.MotivoContato}
                                        error={errors ? (errors.MotivoContato as string) : ''}
                                        style={{ 'border': 'none' }}
                                    />

                                    <Input
                                        placeholder="Conte-nos em mais detalhes:"
                                        name="Observacao"
                                        type="textarea"
                                        value={values.Observacao}
                                        error={errors ? (errors.Observacao as string) : ''}
                                        style={{ 'border': 'none', 'height': '120px', 'resize': 'none' }}

                                    />

                                    <button
                                        type="submit"
                                        className="mt-6 bg-[--secundary] w-full h-[56px] text-white py-2 px-4 rounded-lg shadow-md hover:bg-[#D8A844] flex items-center justify-center"
                                    >
                                        Enviar
                                    </button>
                                </Form>
                            );
                        }}
                    </Formik>
                </div>
            </div>
        </section>

    )
}