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: 50, sizeY: 50 }}
      wheel={{ step: 2 }}
      // zoomAnimation={{
      //   disabled: false,
      //   size: 0,
      //   animationType: "easeOutQuart",
      //   animationTime: 500,
      // }}

      //   velocityAnimation={{
      //     sensitivity: 1000,
      //     animationTime: 1000,
      //     animationType: "easeOut",
      //   }}
    >
      <TransformComponent
        wrapperClass={
          "h-[calc(100vh+150px)] w-[calc(100vw+400px)] top-[-50px]"
          // "h-[calc(100vh+150px)] w-[calc(100vw+400px)] top-[-50px] left-[-200px]"
        }
      >
        <ImageMarker
          src="images/Map.jpg"
          markers={imageMarkers}
          markerComponent={Marker}
          extraClass={`transition-all duration-300 ease-in-out ${
            hoveredMarker ? "brightness-[.7]" : ""
          }`}
        />
      </TransformComponent>
    </TransformWrapper>
  );
};

export default Map;
