'use client'

import { useEffect, useState } from "react";
import Image from "next/image";

import { BiSearch } from "react-icons/bi";
import useDeviceType from "@/utils/getDeviceType";
import HasAnAccreditedClinicMap from "./_components/HasAnAccreditedClinicMap";
import pinPlamev from "../../../../public/assets/Images/ImageCredentialNetwork/pinPlamev.svg"
import { useCredentialContext } from "@/hooks/credenciado";
import { LuMapPin } from "react-icons/lu";
import filter from "../../../../public/assets/Images/Icons/filtros.svg"
import xClose from "../../../../public/assets/Images/Icons/xClose.svg"
import InformationBeforeHiring from "../nossos-planos/_components/InformationBeforeHiring";

export default function CredentialNetwork() {
    const [isOpenMap, setIsOpenMap] = useState<boolean>(false);
    const [clinic, setClinic] = useState<boolean>(false);
    const screen = useDeviceType();

    const {
        setSearchData,
        searchData,
        addressStores,
        setCenter,
        setStates,
        setCityes,
        states,
        cityes,
        setopenmap,
        openMap,
        setStatesId,
        setCityesId,
        isModalOpen,
        setModalOpen,
        statesId,
        cityesId,
        neighborhood,
        laboratory,
        plantation,
        searchCredentialPerState,
        setNeighborhood,
        setLaboratory,
        setPlantation,
        specialityId,
        setSpecialityId,
        setSpecialityNome,
        specialityNome
    } = useCredentialContext();

    useEffect(() => {
        if (screen === 'desktop') {
            setIsOpenMap(true);
        }
    }, [screen]);

    useEffect(() => {
        setModalOpen(true)

        if (typeof window !== 'undefined') {
            if (window.localStorage.getItem('Estados') || window.localStorage.getItem('Cidade')) {
                setCityes(window.localStorage.getItem('Cidade') ?? '');
                setStates(window.localStorage.getItem('Estados') ?? '');

                setStatesId(window.localStorage.getItem('EstadosId') ?? '')
            }
        }
    }, [setModalOpen, setCityes, setStates, setStatesId])

    const handleFilterAndSetMapCenter = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setSearchData(value);
    
        const filteredData = Object.values(addressStores).filter(item =>
            item.Credenciados?.NomeCredenciado?.toLowerCase().includes(value.toLowerCase())
        );
    
        const locationsAccredited = filteredData
            .map(item => ({
                lat: parseFloat(item.IndividuosEnderecos?.Latitude),
                lng: parseFloat(item.IndividuosEnderecos?.Longitude),
            }))
            .filter(({ lat, lng }) => !isNaN(lat) && !isNaN(lng));
    
        setClinic(value.length > 0);
    
        // Atualiza marcadores apenas se válido
        setCenter([...locationsAccredited]);
    };
    

    const handleFilterClick = (filterType: string) => {
        switch (filterType) {
            case 'laboratory':
                setLaboratory(false);
                false;
                break;
            case 'plantation':
                setPlantation(false);
                false;
                break;
            case 'clinic':
                setClinic(false);
                break;
            case 'state':
                setStatesId('');
                setCityes('');
                window.localStorage.removeItem('Cidade')
                false;
                break;
            case 'city':
                setCityesId('');
                false;
                break;
            case 'neighborhood':
                setNeighborhood('');
                false;
                break;
            case 'speciality':
                setSpecialityId('');
                setSpecialityNome('');  
                false;
                break;
            default:
                break;
        }

        searchCredentialPerState({
            statesId: filterType === 'state' ? '' : statesId,
            cityesId: filterType === 'city' ? '' : cityesId,
            laboratory: filterType === 'laboratory' ? false : laboratory,
            neighborhood: filterType === 'neighborhood' ? '' : neighborhood,
            plantation: filterType === 'plantation' ? false : plantation,
            specialityId: filterType === 'speciality' ? '' : specialityNome
        });
    };

    return (
        <>
            <section
                className={`w-full  ${screen == 'desktop' ? `bg-[url('/assets/Images/ImageCredentialNetwork/bgCredentialNetwork.svg')] bg-cover bg-center` : ''} flex flex-col items-center justify-center text-center z-0 h-full bg-[#FFFDFA]`}
                style={{ backgroundPosition: 'center 58%' }}>
                <div className="max-w-screen-lg mx-auto">
                    <div className="flex justify-center flex-col items-center p-4 lg:p-0 mt-10 md:mt-20">

                        {screen == "mobile" &&
                            <Image src={pinPlamev} alt="plamev pin" />
                        }

                        <h1 className="text-[40px] lg:text-[56px] leading-[3rem] font-bold text-[--primary] w-full sm:w-4/5 md:w-2/4 lg:mt-0">
                            TEM UMA CLÍNICA CREDENCIADA <span className="text-[--secundary]">PLAMEV PERTINHO DE VOCÊ!</span>
                        </h1>
                    </div>
                </div>

                <div className="w-full container mx-auto p-4 sm:p-8">
                    <p className="text-base text-[--text-color] mt-3 mb-10">
                        Confira nossa Rede Credenciada:
                    </p>

                    <div className="flex flex-col gap-4">

                        <div className="flex flex-col  lg:flex-row gap-4">
                            <div className="relative lg:w-1/2">
                                <button
                                    className="w-full border border-gray-300 rounded-lg h-16 bg-white"
                                    onClick={() => setModalOpen(true)}
                                >
                                    <span className="absolute left-3 top-1/2 transform -translate-y-1/2 flex gap-2">
                                        <LuMapPin fontSize={24} />
                                        {states} - {cityes && !!cityes && cityes} {neighborhood && neighborhood !== 'Bairro' ? `- ${neighborhood}` : ''} {specialityId ? `- ${specialityNome}` : ''} {laboratory ? '- Laboratório' : ''} {plantation ? '- Plantão 24h' : ''}
                                    </span>
                                </button>
                            </div>

                            <div className="relative lg:w-1/2">
                                <span className="absolute left-3 top-1/2 transform -translate-y-1/2">
                                    <BiSearch fontSize={24} />
                                </span>

                                <input
                                    type="text"
                                    placeholder="Clínica"
                                    className="w-full border border-gray-300 p-3 pl-10 rounded-lg h-16"
                                    value={searchData}
                                    onChange={handleFilterAndSetMapCenter}
                                />
                            </div>


                        </div>

                        <div className="flex flex-row gap-2">
                            <span
                                className="border-[1px] p-2 rounded-full h-[31px] w-[61px] text-[10px] flex gap-1"><Image
                                    src={filter} alt="" /> Filtros</span>
                            {clinic &&
                                <span
                                    className="border-[1px] items-center border-plamev-yellow-50 p-2 rounded-full h-[31px] text-[10px] flex gap-1 bg-plamev-yellow-50 hover:bg-plamev-yellow-100 hover:border-plamev-yellow-200"
                                >
                                    Clínica <a onClick={() => handleFilterClick('clinic')}><Image src={xClose} alt="" /></a>
                                </span>
                            }
                            {plantation &&
                                <span
                                    className="border-[1px] items-center border-plamev-yellow-50 p-2 rounded-full h-[31px]  text-[10px] flex gap-1 bg-plamev-yellow-50 hover:bg-plamev-yellow-100 hover:border-plamev-yellow-200"
                                >
                                    Clínicas 24horas <a onClick={() => handleFilterClick('plantation')}><Image
                                        src={xClose} alt="" /></a>
                                </span>
                            }

                            {laboratory &&
                                <span
                                    className="border-[1px] items-center border-plamev-yellow-50 p-2 rounded-full h-[31px] text-[10px] flex gap-1 bg-plamev-yellow-50 hover:bg-plamev-yellow-100 hover:border-plamev-yellow-200"
                                >
                                    Laboratório <a onClick={() => handleFilterClick('laboratory')}><Image src={xClose}
                                        alt="" /></a>
                                </span>
                            }

                            {statesId &&
                                <span
                                    className="border-[1px] items-center border-plamev-yellow-50 p-2 rounded-full h-[31px] text-[10px] flex gap-1 bg-plamev-yellow-50 hover:bg-plamev-yellow-100 hover:border-plamev-yellow-200"
                                >
                                    Estado <a onClick={() => handleFilterClick('state')}><Image src={xClose}
                                        alt="" /></a>
                                </span>
                            }

                            {cityesId &&
                                <span
                                    className="border-[1px] items-center border-plamev-yellow-50 p-2 rounded-full h-[31px] text-[10px] flex gap-1 bg-plamev-yellow-50 hover:bg-plamev-yellow-100 hover:border-plamev-yellow-200"
                                >
                                    Cidade <a onClick={() => handleFilterClick('city')}><Image src={xClose} alt="" /></a>
                                </span>
                            }

                            {specialityId &&
                                <span
                                    className="border-[1px] items-center border-plamev-yellow-50 p-2 rounded-full h-[31px] text-[10px] flex gap-1 bg-plamev-yellow-50 hover:bg-plamev-yellow-100 hover:border-plamev-yellow-200"
                                >
                                    Especialidades <a onClick={() => handleFilterClick('speciality')}><Image src={xClose}
                                        alt="" /></a>
                                </span>
                            }

                            {neighborhood && neighborhood !== 'Bairro' &&
                                <span
                                    className="border-[1px] items-center border-plamev-yellow-50 p-2 rounded-full h-[31px] text-[10px] flex gap-1 bg-plamev-yellow-50 hover:bg-plamev-yellow-100 hover:border-plamev-yellow-200"
                                >
                                    Bairro <a onClick={() => handleFilterClick('neighborhood')}><Image src={xClose}
                                        alt="" /></a>
                                </span>
                            }
                        </div>
                    </div>
                </div>
            </section>

            <HasAnAccreditedClinicMap
                onClick={isModalOpen}
                onCloseModal={() => setModalOpen(!isModalOpen)}
                isOpenMapState={false}
            />

           <InformationBeforeHiring />
        </>
    )
}