import { useMap } from "react-leaflet";
import { useEffect, useMemo } from "react";
import { useTranslations } from "next-intl";
import L from "leaflet";
import { useAtomValue } from "jotai";

import { TimeControl } from "@/types";
import { filteredTournamentsByTimeControlAtom } from "@/app/atoms";

const Legend = () => {
  const t = useTranslations("Tournaments");
  const map = useMap();
  const tournaments = useAtomValue(filteredTournamentsByTimeControlAtom);

  const timeControls = useMemo(
    () =>
      [
        { tc: TimeControl.Classic, colour: "#00ac39" },
        { tc: TimeControl.Rapid, colour: "#0086c7" },
        { tc: TimeControl.Blitz, colour: "#cec348" },
        { tc: TimeControl.Other, colour: "#d10c3e" },
      ].filter(({ tc }) => tournaments.some((t) => t.timeControl === tc)),
    [tournaments]
  );

  useEffect(() => {
    if (map) {
      // @ts-ignore
      const legend = L.control({ position: "bottomleft" });

      legend.onAdd = () => {
        const div = L.DomUtil.create("div", "map-legend");
        div.setAttribute(
          "style",
          "background: white; color: black; border: 2px solid grey; border-radius: 6px; padding: 10px;"
        );

        div.innerHTML = `
          <ul>
            ${timeControls
              .map(
                ({ tc, colour }) => `
                  <li>
                    <span class="block h-4 w-7 border border-[#999] float-left mr-1" style="background: ${colour}"></span>${t(
                  "timeControlEnum",
                  { tc }
                )}
                  </li>
                `
              )
              .join("")}
          </ul>`;
        return div;
      };

      legend.addTo(map);
    }
  }, [map, t]); // eslint-disable-line react-hooks/exhaustive-deps
  return null;
};

export default Legend;