'use client';

import React, { useEffect, useState } from "react";

import { IoMdCloseCircleOutline } from "react-icons/io";
import { useCheckoutContext } from "@/hooks/UseCheckout";
import { API_URL, TOKEN } from "@/utils/constants/selectConstants";

const ModalContratoCliente = () => {
    const { modalContratoCliente, setModalContratoCliente, name, document, zipCode, address, number, complement, district, state, city, petsBudget } = useCheckoutContext();
    const [contrato, setContrato] = useState<any>([])


    useEffect(() => {
        let formData = {
            Pets: petsBudget,
            DadosClientes: {
                IndividuosNome: name,
                IndividuosDocumento: document,
                IndividuosEnderecosCep: zipCode,
                IndividuosEnderecosLogradouro: address,
                IndividuosEnderecosNumero: number,
                IndividuosEnderecosComplemento:complement,
                IndividuosEnderecosBairro: district,
                IndividuosEnderecosCidadesNome: city,
                IndividuosEnderecosEstadosNome: state
            }
        }

        fetch(`${API_URL}Contratos/PegarContratoPublico`, {
            method: 'POST',
            headers: {
                Authorization: TOKEN
            },
            body: JSON.stringify(formData)

        })
            .then(res => res.json())
            .then(body => {
                setContrato(body);
            })
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [modalContratoCliente]);

    return (
        <>
            {modalContratoCliente && (
                <div
                    className="h-full w-full fixed top-0 z-40 bg-zinc-900/[.70] flex justify-center items-center"
                    onClick={() => setModalContratoCliente(false)}
                >
                    <div className="w-[95%] h-[250px] sm:w-[768px] sm:h-[550px]">
                        <div className="flex justify-end items-center mb-5">
                            <div
                                className="text-white font-thin text-[32px] cursor-pointer"
                                onClick={() => setModalContratoCliente(false)}
                            >
                                <IoMdCloseCircleOutline />
                            </div>
                        </div>

                        <div className="bg-white w-[100%] h-[450px] overflow-y-auto p-4" dangerouslySetInnerHTML={{ __html: contrato.Contrato }}></div>
                    </div>
                </div>
            )}
        </>
    )
}

export default ModalContratoCliente;