"use client"
import { FC } from "react";
import { MapContainer, TileLayer, useMap, Popup, Marker, Polyline, CircleMarker } from 'react-leaflet';

import { Icon, divIcon, point } from "leaflet";
import { LatLngTuple } from 'leaflet'
import "leaflet/dist/leaflet.css";

import L from "leaflet";
import { twMerge } from "tailwind-merge";
delete (L.Icon.Default.prototype as any)._getIconUrl;
L.Icon.Default.mergeOptions({
    iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
    iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
    shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
});

const blueIcon = new L.Icon({
    iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png",
    shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

type MarkerData = {
    geocode: LatLngTuple;
    info: any;
    status: string | number
}

type Props = {
    markers?: MarkerData[];
    position?: LatLngTuple;
    className?: string
}

const BoxMap: FC<Props> = ({ markers, position = [51.505, -0.09], className = "h-[calc(100dvh-200px)] rounded-lg z-0" }) => {
    const deviceIcon = new Icon({
        iconUrl: "./icons/device_marker.png",
        iconSize: [38, 38] // size of the icon
    });
    const tjBoxIcon = new Icon({
        iconUrl: "./icons/tj-box.png",
        iconSize: [38, 38] // size of the icon
    });
    const activeIcon = new Icon({
        iconUrl: "./icons/marker_active.svg",
        iconSize: [38, 38] // size of the icon
    });
    const inactiveIcon = new Icon({
        iconUrl: "./icons/marker_inactive.svg",
        iconSize: [38, 38] // size of the icon
    });
    return (
        <div className="h-full relative">
            <MapContainer center={position} zoom={13} scrollWheelZoom={true} className={twMerge(className)}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                {/* <MarkerClusterGroup
                    chunkedLoading
                > */}
                {markers && markers?.map((marker: any) => (
                    <>
                        <Marker key={marker?.id} position={marker?.geocode} icon={tjBoxIcon}>
                            <Popup >
                                {marker.info?.name && (
                                    <div>Name : {marker.info?.name}</div>
                                )}
                                {marker.info?.status && (
                                    <div className="flex">Status :
                                        <div className={twMerge(marker?.info?.status === "active" ? "text-green-600" : "text-red-600", "capitalize")}> {marker.info?.status}</div></div>
                                )}
                            </Popup>
                        </Marker>
                        {marker.device && (
                            <Marker key={marker?.device?.id} position={marker?.device?.geocode} icon={deviceIcon}>
                                <Popup >
                                    {marker.device?.name && (
                                        <div>Name : {marker.device?.name}</div>
                                    )}
                                    {marker.device?.status && (
                                        <div className="flex">Status :
                                            <div className={twMerge(marker?.device?.status === "active" ? "text-green-600" : "text-red-600", "capitalize")}> {marker.device?.status}</div></div>
                                    )}
                                </Popup>
                            </Marker>
                        )}
                        {marker.device && (
                            <Polyline
                                positions={[marker.geocode, marker.device.geocode]}
                                pathOptions={{ color: marker.device.status === "active" ? "green" : "red", weight: 3 }}
                            />
                        )}
                    </>
                ))}
                <CircleMarker center={position} radius={20}>
                    <Popup>Office</Popup>
                </CircleMarker>

            </MapContainer>
        </div>

    )
}

export default BoxMap;