"use client";
import { FC, useEffect, useMemo, useState } from "react";
import dynamic from "next/dynamic";
import { LatLngTuple } from "leaflet";
import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { toast } from "react-toastify";
import { useParseError, useParseFloat } from "@/utils/lib/helpers";
import { Spinner } from "flowbite-react";
import { useSettings } from "@/utils/settings";
import OLTUserMap from "./OLTUserMap";

const LeafletMap = dynamic(() => import("./leaflet-map"), { ssr: false })

const ClientMaps: FC = () => {
    const [filterValue, setFilter] = useState(null);
    const lat = useSettings("lat");
    const lon = useSettings("lon");

    let base_url = `/api/v1/client-maps`;
    let url = filterValue ? `${base_url}&${filterValue}` : base_url;

    const getClientsMap = async () => {
        const data = await getData(url);
        if (!data?.success) {
            return toast.error(useParseError(data))
        }
        return data?.data;
    };
    const {
        data: markers,
        isLoading,
        isFetching,
        refetch,
    } = useQuery({
        queryKey: ["client-maps"],
        queryFn: () => getClientsMap(),
        refetchOnWindowFocus: false,
    });

    useEffect(() => {
        if (!filterValue?.includes("#")) {
            refetch();
        }
    }, [filterValue]);
    const markersExample: { geocode: LatLngTuple; popUp: string; }[] = [
        {
            geocode: [48.86, 2.3522] as LatLngTuple,
            popUp: "Hello, I am pop up 1"
        },
        {
            geocode: [48.85, 2.3522] as LatLngTuple,
            popUp: "Hello, I am pop up 2"
        },
        {
            geocode: [48.855, 2.34] as LatLngTuple,
            popUp: "Hello, I am pop up 3"
        }
    ];
    console.log(markers);
    return (
        <>
            {(isLoading || isFetching) && (
                <div className="relative">
                    <div className="grid fixed left-2/4 top-1/2 z-50">
                        <Spinner size="xl" color="purple" />
                    </div>
                </div>
            )}
            <div className="h-full w-full pt-4">
                {markers && markers?.length > 0 && (
                    <LeafletMap markers={markers} position={[useParseFloat(lat), useParseFloat(lon)]} />
                )}
            </div>
        </>


    )
}

export default ClientMaps;