/* eslint-disable react-hooks/exhaustive-deps */
import { MarkerComponentProps } from "react-image-marker";
import { useEffect, useState } from "react";
import { useTransformContext } from "react-zoom-pan-pinch";
import { markers } from "../../../consts/markers";
import useMarker from "../../../store/useMarker";
import { useNavigate } from "react-router-dom";

const Marker = (props: MarkerComponentProps) => {
  const { setHoveredMarker, hoveredMarker } = useMarker();
  const { transformState } = useTransformContext();
  const [markerScale, setMarkerScale] = useState(1);
  const navigate = useNavigate();
  const currentMarker = markers.find(
    (marker) => marker.itemNumber === props.itemNumber
  );

  const handleOnMouseEnter = () => {
    const hoveredMarker = currentMarker ? currentMarker : null;
    setHoveredMarker(hoveredMarker);
  };

  const handleOnScroll = () => {
    const scale = 1 / transformState.scale;
    setMarkerScale(scale);
  };

  const handleOnMouseLeave = () => {
    setHoveredMarker(null);
  };

  const handleOnClick = () => {
    navigate(`../masterplan/${currentMarker?.itemNumber}`);
    setHoveredMarker(null);
  };

  useEffect(() => {
    const map = document.querySelector(".react-transform-wrapper");
    handleOnScroll();
    if (map) map.addEventListener("wheel", handleOnScroll);

    return () => {
      if (map) map.removeEventListener("wheel", handleOnScroll);
    };
  }, []);

  return (
    <div
      className="relative transition-transform "
      style={{ transform: `scale(${markerScale})` }}
    >
      <div
        className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${
          hoveredMarker &&
          hoveredMarker.itemNumber !== currentMarker?.itemNumber
            ? "brightness-[.7]"
            : ""
        } ${currentMarker?.isPopupLeft ? "block" : "hidden"}`}
      >
        <div className={`flex items-center py-2 `}>
          <div className={`bg-white px-2 py-1 rounded-lg `}>
            {currentMarker && (
              <img src={currentMarker.popup} alt="1" width={108} height={54} />
            )}
          </div>
          <div className="relative w-[5.5px] h-2">
            <div className="w-0 h-0 border-y-4 border-l-8 border-r-0 border-transparent border-l-[#fff] absolute top-0 -left-[2.5px]" />
          </div>
        </div>
      </div>
      <div
        onClick={handleOnClick}
        className={`flex gap-1 transition-all duration-300 ease-in-out cursor-pointer ${
          hoveredMarker &&
          hoveredMarker.itemNumber !== currentMarker?.itemNumber
            ? "brightness-[.7]"
            : ""
        }`}
      >
        <div
          onMouseEnter={handleOnMouseEnter}
          onMouseLeave={handleOnMouseLeave}
        >
          <img
            id="marker"
            src="/images/markers/1.png"
            alt="1"
            width={72}
            height={98}
          />
        </div>
      </div>
      <div
        className={`flex items-end absolute w-[108px] top-[22px] left-[72px] transition-all duration-300 ease-in-out ${
          currentMarker?.isPopupLeft ? "hidden" : "block"
        } ${
          hoveredMarker &&
          hoveredMarker.itemNumber !== currentMarker?.itemNumber
            ? "brightness-[.7]"
            : ""
        }`}
      >
        <div className={`flex items-center py-2`}>
          <div className="relative w-[5.5px] h-2">
            <div className="w-0 h-0 border-y-4 border-r-8 border-l-0 border-transparent border-r-[#fff] absolute top-0 -right-[2.5px]" />
          </div>
          <div className={`bg-white px-2 py-1 rounded-lg`}>
            {currentMarker && (
              <img src={currentMarker.popup} alt="1" width={108} height={54} />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Marker;