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";
import ZoomControlls from "./ZoomControlls";

const Map = () => {
  const { hoveredMarker } = useMarker();

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

  return (
    <div className="relative">
      <TransformWrapper
        initialScale={isMobile ? 2 : 1}
        minScale={isMobile ? 2 : 1}
        maxScale={2}
        alignmentAnimation={{ sizeX: 50, sizeY: 50 }}
        wheel={{ step: 10000, smoothStep: 0.0005 }}
        zoomAnimation={{
          size: 0,
          animationType: "easeOutQuart",
          animationTime: 500,
        }}
      >
        <ZoomControlls />
        <TransformComponent
          wrapperStyle={{
            width: "calc(100vw + 400px)",
            height: "calc(100vh + 150px)",
          }}
          wrapperClass={"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>
    </div>
  );
};

export default Map;