"use client";
import { FC, useEffect, useMemo, useState } from "react";
import dynamic from "next/dynamic";
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";

const BoxMap = dynamic(() => import("./box-maps"), { ssr: false })
type props = {
    filterValue?: string
}
const TjBoxMaps: FC<props> = ({ filterValue }) => {
    const lat = useSettings("lat");
    const lon = useSettings("lon");

    let base_url = `/api/v1/tj-boxes-map`;
    let url = filterValue ? `${base_url}?${filterValue}` : base_url;

    const getTjBoxes = 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: ["tj-boxes", { filterValue }],
        queryFn: () => getTjBoxes(),
        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 z-0">
                <BoxMap markers={markers} position={[useParseFloat(lat), useParseFloat(lon)]} />
            </div>
        </>


    )
}

export default TjBoxMaps;