'use client'

import { postDataSecondCopyOfBill } from "@/actions/pageSecondCopyOfBillAction";
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 { useState } from "react";

import { toast } from "react-toastify";
import * as Yup from 'yup';
import TableSecondCopyOfBill from "./_components/TableSecondCopyOfBill";
import { API_URL, TOKEN } from "@/utils/constants/selectConstants";
import { FaSpinner } from "react-icons/fa";

const initialData = {
    Documento: '',
    Email: ''
};

interface ISecondCopyOfBill {
    FaturasId: string;
    FaturasDataOriginal: string;
    FaturasValor: string;
    FaturasVendasId: string;
    IndividuosNome: string;
}

export default function SecondCopyOfBill() {
    const [dataSecundCopyOfBill, setDataSecundCopyOfBill] = useState<ISecondCopyOfBill[]>([])
    const [load, setLoad] = useState<boolean>(false);

    const validationFormUserSchema = Yup.object({
        Documento: 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) => {
        try {

            setLoad(true);
            setDataSecundCopyOfBill([]);

            const data = {
                Documento: onlyNumbers(e.Documento),
                Email: e.Email,
                Local: 2
            };

            const url = `${API_URL}Vendas/SegundaViaSite/`;

            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    Authorization: TOKEN,
                    'Content-Type': 'application/json',
                    LocalAcesso: 'Site'
                },
                body: JSON.stringify(data),
            });

            setLoad(false);

            if (!response.ok) {
                throw new Error('Erro ao enviar dados, verifique os campos acima.');
            } else {
                const result = await response.json();
                setDataSecundCopyOfBill(Object.values(result))
            }
        } catch (e) {
            toast.error('Erro ao enviar dados, verifique os campos acima.');
        }
    };

    return (
        <div className="flex flex-col items-center py-10 px-4">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[--primary] mb-4 text-center w-full sm:w-4/6">
                Emita a segunda via do seu boleto e mantenha seu pet seguro!
            </h2>

            <div className="container p-4 sm:p-6 w-full">
                <div className="bg-[#F8FBF2] rounded-lg p-4 sm:p-6 flex justify-center">
                    <div className="w-full max-w-lg sm:max-w-3xl">
                        <p className="text-center mb-4">
                            Para emitir a 2ª via do boleto preencha seus dados abaixo e clique em &quot;emitir boleto&quot;:
                        </p>

                        <Formik
                            onSubmit={(values, { resetForm }) => handleSendContact(values, resetForm)}
                            enableReinitialize
                            validationSchema={validationFormUserSchema}
                            validateOnChange={true}
                            validateOnBlur={true}
                            initialValues={{ ...initialData }}
                        >
                            {({ errors, values }) => (
                                <Form className="space-y-4 mt-4">
                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                        <Input
                                            type="email"
                                            placeholder="E-mail"
                                            name="Email"
                                            value={values.Email}
                                            error={errors ? (errors.Email as string) : ''}
                                        />

                                        <MaskedInputField
                                            placeholder="CPF"
                                            name="Documento"
                                            value={values.Documento}
                                            error={errors ? (errors.Documento as string) : ''}
                                            mask={maskCPF}
                                            label={"CPF"}
                                        />
                                    </div>
                                    {load &&
                                        <div className="flex justify-center mt-4 font-poppins font-semibold">
                                            Momento, estamos buscando seus boletos...
                                        </div>
                                    }
                                    {!load &&
                                        <div className="flex justify-end mt-4">

                                            <button
                                                type="submit"
                                                className="bg-plamev-blue-500 text-white h-[54px] w-[89px] rounded-[6px] hover:bg-plamev-blue-600 text-[16px] font-poppins font-semibold"
                                            >
                                                Buscar
                                            </button>

                                        </div>
                                    }
                                </Form>
                            )}
                        </Formik>
                    </div>
                </div>

                {dataSecundCopyOfBill.length > 0 &&
                    <TableSecondCopyOfBill bills={dataSecundCopyOfBill} />
                }
            </div>
        </div>

    )
}