import { useEffect, useRef, useState } from "react";
import { Image } from "../../types";
import useStore from "../../store/store";
import CrossIcon from "../../icons/CrossIcon";
import ArrowCarouselIcon from "../../icons/ArrowCarouselIcon";
import ZoomInIcon from "../../icons/ZoomInIcon";
import ZoomOutIcon from "../../icons/ZoomOutIcon";

type ZoomInLetterModalProps = {
  images: Image[];
  currentImage: number;
};

const ZoomInLetterModal = ({
  images,
  currentImage,
}: ZoomInLetterModalProps) => {
  const { setModal } = useStore();
  const [selectedImage, setSelectedImage] = useState(currentImage);
  const [isZoomed, setIsZoomed] = useState(false);
  const currentImageRef = useRef<null | HTMLImageElement>(null);

  useEffect(() => {
    setIsZoomed(false);
    if (!currentImageRef || !currentImageRef?.current) return;
    currentImageRef.current.style.transform = ``;
  }, [selectedImage]);

  useEffect(() => {
    if (!currentImageRef || !currentImageRef?.current || isZoomed) return;
    currentImageRef.current.style.transform = ``;
  }, [isZoomed]);

  const handleOnRightClick = () => {
    setSelectedImage((prev) => prev + 1);
  };

  const handleOnLeftClick = () => {
    setSelectedImage((prev) => prev - 1);
  };

  const handleOnCloseModal = () => {
    setModal(null);
  };

  const handleOnZoomSwitch = (
    event: React.MouseEvent<HTMLImageElement, MouseEvent>
  ) => {
    if (!currentImageRef || !currentImageRef?.current) return;

    setIsZoomed((prev) => !prev);
    currentImageRef.current.style.transform = `scale(1.5) translate(-5vw, ${
      200 - 300 * (event.clientY / window.innerHeight)
    }px)`;
  };

  function handleOnMouseMove(
    event: React.MouseEvent<HTMLImageElement, MouseEvent>
  ): void {
    if (!currentImageRef || !currentImageRef?.current || !isZoomed) return;

    currentImageRef.current.style.transform = `scale(1.5) translate(-5vw, ${
      200 - 300 * (event.clientY / window.innerHeight)
    }px)`;
  }

  return (
    <div className="fixed w-screen h-screen bg-[#fff] z-30 flex justify-center items-center select-none">
      <div
        className="flex w-fit duration-300 transition-all"
        style={{
          transform: `translateX(calc(${
            Math.round(images.length / 2) - selectedImage
          }*100vw))`,
        }}
      >
        {images.map((image) => {
          const isCurrentImage = selectedImage === image.id;

          return (
            <>
              {isCurrentImage ? (
                <div key={`${image.id}-current`} className="h-screen w-screen">
                  <img
                    ref={currentImageRef}
                    onClick={handleOnZoomSwitch}
                    onMouseMove={handleOnMouseMove}
                    key={image.id}
                    src={image.image}
                    alt=""
                    className={`h-full mx-auto ${
                      isZoomed ? "cursor-zoom-out" : "cursor-zoom-in"
                    }`}
                  />
                </div>
              ) : (
                <div key={image.id} className="h-screen w-screen">
                  <img
                    key={image.id}
                    src={image.image}
                    alt=""
                    className={`h-full mx-auto`}
                  />
                </div>
              )}
            </>
          );
        })}
      </div>
      <div className="absolute top-2 right-2 z-30 flex gap-6">
        <div className="p-[10px] cursor-pointer" onClick={handleOnZoomSwitch}>
          {!isZoomed ? <ZoomInIcon /> : <ZoomOutIcon />}
        </div>
        <div className="p-[10px] cursor-pointer" onClick={handleOnCloseModal}>
          <CrossIcon color="#000" />
        </div>
      </div>
      <div
        className="z-30 absolute top-1/2 right-2 p-[10px] cursor-pointer"
        onClick={handleOnRightClick}
      >
        <ArrowCarouselIcon className="stroke-black" />
      </div>
      <div
        className="z-30 absolute top-1/2 left-2 p-[10px] cursor-pointer"
        onClick={handleOnLeftClick}
      >
        <ArrowCarouselIcon isLeft />
      </div>
    </div>
  );
};

export default ZoomInLetterModal;
