"use client";
import { FC, useEffect, useMemo, useState } from "react";
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";
import FilterForm from "../common/filter-form";
import { clientFilter } from "../forms/schema/client-filter";
import { clientMapFilter } from "../forms/schema/client-map-filter";

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: mapData,
        isLoading,
        isFetching,
        refetch,
    } = useQuery({
        queryKey: ["client-maps"],
        queryFn: () => getClientsMap(),
        refetchOnWindowFocus: false,
    });

    useEffect(() => {
        if (!filterValue?.includes("#")) {
            refetch();
        }
    }, [filterValue]);
    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">
                <div className=" dark:border-gray-600 z-10">
                    <FilterForm schema={clientMapFilter} grids={4} setFilter={setFilter} />
                </div>
                <div className="z-0 relative">
                    <OLTUserMap mapData={mapData} center={[useParseFloat(lat), useParseFloat(lon)]} />
                </div>
            </div>
        </>


    )
}

export default ClientMaps;