import { MarkerComponentProps } from "react-image-marker";
import { markers } from "../../consts/markers";
import useMarker from "../../store/useMarker";

const Marker = (props: MarkerComponentProps) => {
  const { setHoveredMarker, hoveredMarker } = useMarker();
  const currentMarker = markers.find(
    (marker) => marker.itemNumber === props.itemNumber
  );

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

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

  return (
    <div
      className={`flex gap-1 transition-all duration-300 ease-in-out ${
        hoveredMarker && hoveredMarker.itemNumber !== currentMarker?.itemNumber
          ? "brightness-[.7]"
          : ""
      }`}
    >
      <div
        className={`flex items-end ${
          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={72} height={36} />
            )}
          </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 onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
        <img src="/images/markers/1.png" alt="1" width={72} height={98} />
      </div>
      <div
        className={`flex items-end ${
          currentMarker?.isPopupLeft ? "hidden" : "block"
        }`}
      >
        <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={72} height={36} />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Marker;
