import { useState } from "react";
import ArrowCarouselIcon from "../../icons/ArrowCarouselIcon";
import { thanksgivingLetters } from "../../consts/clientsPage";
import { Image } from "../../types";
import useStore from "../../store/store";
import ZoomInLetterModal from "./ZoomInLetterModal";

const IMAGE_WIDTH = 660;

const ClientsPageCarousel = () => {
  const middleLetter = Math.floor(thanksgivingLetters.length / 2);
  const isOddCount = middleLetter % 2 === 1;
  const defaultOffset = isOddCount ? 300 : 0;

  const { setModal } = useStore();
  const [letters] = useState<Image[]>(thanksgivingLetters);
  const [currentImage, setCurrentImage] = useState(middleLetter);
  const [offset, setOffset] = useState(IMAGE_WIDTH);

  const handleOnRightButtonClick = () => {
    if (currentImage < letters.length) {
      setOffset((prev) => prev - IMAGE_WIDTH);
      setCurrentImage((prev) => prev + 1);
    }
  };

  const handleOnLeftButtonClick = () => {
    if (currentImage > 1) {
      setOffset((prev) => prev + IMAGE_WIDTH);
      setCurrentImage((prev) => prev - 1);
    }
  };

  const handleOnBulletClick = (letterId: number) => {
    return () => {
      const updatedOffset = (currentImage - letterId) * IMAGE_WIDTH;
      setOffset((prev) => prev + updatedOffset);
      setCurrentImage(letterId);
    };
  };

  const handleOnZoomIn = () => {
    setModal(
      <ZoomInLetterModal images={letters} currentImage={currentImage} />
    );
  };

  return (
    <div className="bg-white pb-4">
      <h1 className="font-bold text-[67px] text-center">
        Благодарственные письма
      </h1>
      <div className="py-24 select-none">
        <div className="flex h-[450px] w-[calc(100vw-20px)] overflow-hidden relative">
          <div
            className="flex transition-all duration-500 justify-center w-full"
            style={{
              transform: `translateX(${offset - defaultOffset}px)`,
            }}
          >
            {letters.map((letter) => (
              <div
                onClick={handleOnZoomIn}
                className={`transition-opacity duration-300 h-full min-w-[660px] flex justify-center ${
                  letter.id !== currentImage
                    ? "opacity-30 pointer-events-none"
                    : "cursor-zoom-in"
                }`}
                key={letter.id}
              >
                <img src={letter.image} alt="" className="max-h-full" />
              </div>
            ))}
          </div>

          <button
            className="absolute left-1/4 top-1/3 bg-[#e8e8e8] w-10 h-10 rounded-full"
            onClick={handleOnLeftButtonClick}
          >
            <ArrowCarouselIcon isLeft className="w-[10px] h-4 m-auto" />{" "}
          </button>
          <button
            className="absolute right-1/4 top-1/3 bg-[#e8e8e8] w-10 h-10 rounded-full"
            onClick={handleOnRightButtonClick}
          >
            <ArrowCarouselIcon className="w-[10px] h-4 m-auto" />{" "}
          </button>
        </div>
        <div className="mx-auto flex w-fit pt-6">
          {letters.map((letter) => (
            <div
              key={letter.id}
              className="cursor-pointer py-[10px] px-[5px] group"
              onClick={handleOnBulletClick(letter.id)}
            >
              <div
                key={letter.id}
                className={`w-2 h-2 rounded-full group-hover:bg-black transition-all duration-300 ${
                  letter.id === currentImage ? "bg-black" : "bg-[#c7c7c7]"
                }`}
              ></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ClientsPageCarousel;
