"use client";

import "./ReportMap.scss";
import "leaflet/dist/leaflet.css";
import {
  MapContainer,
  Marker,
  Polyline,
  Popup,
  TileLayer,
} from "react-leaflet";
import geo_green_icon from "./icons/geo-green.svg";
import geo_orange_icon from "./icons/geo-orange.svg";
import geo_pink_icon from "./icons/geo-pink.svg";
import geo_purple_icon from "./icons/geo-purple.svg";
import geo_red_icon from "./icons/geo-red.svg";
import geo_yellow_icon from "./icons/geo-yellow.svg";
import { DivIcon, Icon, LatLngTuple } from "leaflet";
import { StaticImageData } from "next/image";
import { ILocation } from "@/shared/types/location-type";
import { Link } from "@/shared/config/navigation";
import { useReportStore } from "../reportStore";

interface IReportMapProps {
  location: ILocation[];
  category: number;
}

const ReportMap: React.FC<IReportMapProps> = ({
  location,
  category,
}: IReportMapProps) => {
  const { showMap } = useReportStore();
  const createCustomIcon = (icon: StaticImageData) => {
    const customIcon = new Icon({
      iconUrl: icon.src,
      iconSize: [32, 32],
    });

    return customIcon;
  };

  const icons: Record<string, DivIcon> = {
    1: createCustomIcon(geo_red_icon),
    2: createCustomIcon(geo_pink_icon),
    3: createCustomIcon(geo_purple_icon),
    4: createCustomIcon(geo_orange_icon),
    5: createCustomIcon(geo_yellow_icon),
    6: createCustomIcon(geo_green_icon),
  };

  const categoryToPolyline: Record<number, { color: string }> = {
    1: { color: "rgba(230, 68, 82, 0.8)" },
    2: { color: "rgba(198, 152, 224, 0.8)" },
    3: { color: "rgba(135, 40, 157, 0.8)" },
    4: { color: "rgba(247, 181, 84, 0.8)" },
    5: { color: "rgba(254, 211, 99, 0.8)" },
    6: { color: "rgba(158, 221, 128, 0.8)" },
  };
  const position = {
    lat: +location[0].latitude,
    lng: +location[0].longitude,
  };

  return showMap ? (
    <MapContainer
      center={position}
      zoom={14}
      scrollWheelZoom={false}
      className="report-map"
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {location.length === 2 ? (
        <Polyline
          pathOptions={categoryToPolyline[category]}
          positions={[
            [
              parseFloat(location[0].latitude),
              parseFloat(location[0].longitude),
            ],
            [
              parseFloat(location[1].latitude),
              parseFloat(location[1].longitude),
            ],
          ]}
        />
      ) : null}
      {location.map((marker) => (
        <Marker
          key={marker.id}
          icon={icons[category]}
          position={
            [+marker.latitude, +marker.longitude] as LatLngTuple
          }
        >
          <Popup>
            <p>{marker.address}</p>
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  ) : null;
};

export default ReportMap;