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 = () => {
    console.log("first");
    const hoveredMarker = currentMarker ? currentMarker : null;
    setHoveredMarker(hoveredMarker);
  };

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

  return (
    <div
      className={`flex gap-1 transition-all duration-300 ease-in-out ${
        currentMarker?.isPopupLeft ? "" : "flex-row-reverse"
      } ${
        hoveredMarker && hoveredMarker.itemNumber !== currentMarker?.itemNumber
          ? "brightness-[.7]"
          : ""
      }`}
    >
      <div className={`flex items-end `}>
        <div
          className={`flex items-center py-2 ${
            currentMarker?.isPopupLeft ? "" : "rotate-180"
          }`}
        >
          <div
            className={`bg-white px-2 py-1 rounded-lg ${
              currentMarker?.isPopupLeft ? "" : "rotate-180"
            }`}
          >
            {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>
  );
};

export default Marker;
