import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import ImageMarker, { MarkerComponentProps } from "react-image-marker";
import { isMobile } from "react-device-detect";
import Marker from "./Marker";
import { markers } from "../../consts/markers";
import useMarker from "../../store/useMarker";

const Map = () => {
  const { hoveredMarker } = useMarker();
  const imageMarkers: MarkerComponentProps[] = markers.map((marker) => {
    return {
      top: marker.top,
      left: marker.left,
      itemNumber: marker.itemNumber,
    };
  });

  return (
    <TransformWrapper
      initialScale={isMobile ? 2 : 1}
      minScale={isMobile ? 2 : 1}
      alignmentAnimation={{ sizeX: 0, sizeY: 0 }}
      wheel={{ step: 1 }}
      zoomAnimation={{
        disabled: false,
        size: 0,
        animationType: "easeOutQuart",
        animationTime: 2000,
      }}
      //   velocityAnimation={{
      //     sensitivity: 1000,
      //     animationTime: 1000,
      //     animationType: "easeOut",
      //   }}
    >
      <TransformComponent
        wrapperClass={`${isMobile ? "h-screen" : "h-[calc(100vh-60px)]"}`}
      >
        <ImageMarker
          src="images/Map.jpg"
          markers={imageMarkers}
          markerComponent={Marker}
          extraClass={`transition-all duration-300 ease-in-out ${
            hoveredMarker ? "brightness-[.7]" : ""
          }`}
        />
        {/* <div className="bg-black brightness-[.7] absolute w-full h-full left-0 top-0 bg-black opacity-70 pointer-events-none"></div> */}
      </TransformComponent>
    </TransformWrapper>
  );
};

export default Map;
