'use client'

import Script from "next/script";

import { useEffect, useMemo, useState } from "react";
import { GoogleMap, Marker, LoadScript, InfoWindow } from '@react-google-maps/api';
import { useCredentialContext } from "@/hooks/credenciado";
import { useWebContext } from "@/app/(site)/providers";

import CardClinicAccredited from "./_components/CardClinicAccredited";
import ModalFilterAccredited from "./_components/ModalFilterAccredited/ModalFilterAccredited";

import mapIcon from "../../../../../../public/assets/Images/Icons/mapIcon.svg";
import Image from "next/image";

interface IMapProps {
    onClick: (boolean);
    onCloseModal: () => void;
    isOpenMapState: boolean;
}

export default function HasAnAccreditedClinicMap({ onClick, onCloseModal, isOpenMapState }: IMapProps) {
    const [googleMap, setGoogleMap] = useState<google.maps.Map | null>(null);
    const [selectedClinicIndex, setSelectedClinicIndex] = useState<number | null>(null);
    const [hoveredMarker, setHoveredMarker] = useState<number | null>(null);
    const [activeMarkerIndex, setActiveMarkerIndex] = useState<number | null>(null);

    const { isMobile } = useWebContext();
    const { getZoom, getCenter, addressStores, openMap, setopenmap } = useCredentialContext();

    const markerClinics = useMemo(
        () =>
            addressStores
                .map((clinic, originalIndex) => {
                    const lat = parseFloat(clinic?.IndividuosEnderecos?.Latitude);
                    const lng = parseFloat(clinic?.IndividuosEnderecos?.Longitude);

                    if (isNaN(lat) || isNaN(lng)) return null;

                    return {
                        clinic,
                        originalIndex,
                        location: { lat, lng },
                    };
                })
                .filter((item): item is { clinic: (typeof addressStores)[number]; originalIndex: number; location: { lat: number; lng: number } } => item !== null),
        [addressStores]
    );

    const handleSelectClinic = (index: number) => {
        setSelectedClinicIndex(index);

        const selectedMarker = markerClinics.find(({ originalIndex }) => originalIndex === index);
        if (googleMap && selectedMarker) {
            googleMap.panTo(selectedMarker.location);
            googleMap.setZoom(15);
        }
    };

    useEffect(() => {
        if (!googleMap || !window.google) return;

        if (markerClinics.length > 0) {
            const bounds = new window.google.maps.LatLngBounds();
            markerClinics.forEach(({ location }) => {
                bounds.extend(location);
            });
            googleMap.fitBounds(bounds);
        }
    }, [googleMap, markerClinics]);

    useEffect(() => {
        if (!isMobile) {
            setopenmap(true);
        }
    }, [isMobile, setopenmap])

    return (
        <>
            <section className="mx-auto p-4 sm:p-8">
                <noscript>
                    <iframe
                        src="https://www.googletagmanager.com/ns.html?id=GTM-W369BJ4"
                        height="0"
                        width="0"
                        style={{ display: 'none', visibility: 'hidden' }}
                    ></iframe>

                    <Script
                        type="text/javascript"
                        src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/e9fc4309-eb82-483d-8522-05ba3d0d6fd0-loader.js"
                        defer
                    ></Script>
                </noscript>

                <div className={`relative flex flex-col lg:flex-row gap-8`}>
                    {addressStores.length > 0 && (
                        <div
                            className={`overflow-y-scroll scrollbar ${openMap ? 'h-[400px] lg:h-[700px] max-w-full sm:max-w-[400px]' : 'h-[850px] w-full'
                                }`}
                        >
                            <CardClinicAccredited
                                addressStoresData={addressStores}
                                onClinicSelect={handleSelectClinic}
                                selectedClinicIndex={selectedClinicIndex}
                            />
                        </div>
                    )}

                    <div className={`relative flex-1 h-[300px] sm:h-[500px] lg:h-[700px] ${openMap ? 'block' : 'hidden'}`}>
                        <div className="h-full">
                            <LoadScript googleMapsApiKey="AIzaSyDHCriIWlO_A5v83-VwAb_99JHBzFynuqg">
                                <GoogleMap
                                    mapContainerStyle={
                                        isMobile ? { width: "91vw", height: "100vh" } : { width: "100%", height: "100%" }
                                    }
                                    center={markerClinics[0]?.location ?? getCenter[0]}
                                    zoom={getZoom}
                                    onLoad={(map) => {
                                        setGoogleMap(map);
                                        window.google.maps.event.trigger(map, "resize");
                                    }}
                                >

                                    {markerClinics.map(({ clinic, location, originalIndex }) => (
                                        <Marker
                                            key={originalIndex}
                                            position={location}
                                            icon={{
                                                url: '/assets/Images/ImageCredentialNetwork/markerGoogleMaps.svg',
                                                scaledSize: new window.google.maps.Size(
                                                    selectedClinicIndex === originalIndex || hoveredMarker === originalIndex ? 100 : 50,
                                                    selectedClinicIndex === originalIndex || hoveredMarker === originalIndex ? 100 : 70
                                                ),
                                            }}
                                            onMouseOver={() => {
                                                setHoveredMarker(originalIndex);
                                                setActiveMarkerIndex(originalIndex);
                                            }}
                                            onMouseOut={() => {
                                                setHoveredMarker(null);
                                                setActiveMarkerIndex(null);
                                            }}
                                            onClick={() => {
                                                setActiveMarkerIndex(originalIndex);
                                                handleSelectClinic(originalIndex);
                                            }}
                                        >
                                            {activeMarkerIndex === originalIndex && (
                                                <InfoWindow position={location} onCloseClick={() => setActiveMarkerIndex(null)}>
                                                    <div className="p-2">
                                                        <p className="font-semibold">{String(clinic?.Credenciados?.NomeCredenciado)}</p>
                                                        <p className="text-sm">{String(clinic?.IndividuosEnderecos?.Logradouro)}-{String(clinic?.IndividuosEnderecos?.Numero)}-{String(clinic?.IndividuosEnderecos?.Bairro)}</p>
                                                        <p className="text-sm">{clinic?.IndividuosEnderecos?.CidadesNome}, {clinic?.IndividuosEnderecos?.EstadosNome}</p>
                                                    </div>
                                                </InfoWindow>
                                            )}
                                        </Marker>
                                    ))}


                                </GoogleMap>
                            </LoadScript>
                        </div>
                    </div>

                    <button
                        className={`absolute bottom-4 right-24 border rounded-lg bg-white p-2 w-[179px] h-[56px] flex justify-center items-center gap-2 z-50 shadow-md`}
                        onClick={() => setopenmap(!openMap)}
                    >
                        {openMap ? "Esconder Mapa" : "Mostrar Mapa"}
                        <Image src={mapIcon} alt="map" />
                    </button>
                </div>

                {onClick && (
                    <ModalFilterAccredited isOpen={onClick} setIsOpen={onCloseModal} />
                )}
            </section>

        </>
    );
}