/* eslint-disable react-hooks/exhaustive-deps */
import { useSwipeable } from "react-swipeable";
import { useLayoutEffect, useRef, useState } from "react";
import { Image } from "../../../types/image";
import Button from "../../Button";
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";

const images: Image[] = [
  { id: "1", src: "/images/company/slider/1.png" },
  { id: "2", src: "/images/company/slider/2.png" },
  { id: "3", src: "/images/company/slider/3.png" },
];

const getGapOffset = (screenWidth: number) => {
  if (screenWidth > 1600) return 45;
  if (screenWidth > 1280) return 24;
  if (screenWidth > 640) return 16;
  return 16;
};

const ZoneSlider = () => {
  const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
  const [rightImageOffset, setRightImageOffset] = useState("");
  const [imageWidth, setImageWidth] = useState(0);
  const imageRef = useRef<HTMLImageElement>(null);

  useLayoutEffect(() => {
    if (!imageRef.current?.src) return;
    const width = imageRef.current.width;
    setImageWidth(width);
  }, [imageRef.current, window.innerWidth]);

  useLayoutEffect(() => {
    const screenWidth = window.innerWidth;
    const gapOffset = getGapOffset(screenWidth);

    const _rightImageOffset = `${
      // -24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
      -57.5 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
    }px`;

    setRightImageOffset(_rightImageOffset);
  }, [imageWidth, selectedImageIndex, window.innerWidth]);

  const handlers = useSwipeable({
    onSwipedLeft: next,
    onSwipedRight: prev,
    trackMouse: true,
  });

  function next() {
    const lastIndex = images.length - 3;

    if (selectedImageIndex === lastIndex + 1) return;
    setSelectedImageIndex((prev) => prev + 1);
  }

  function prev() {
    if (selectedImageIndex === -1) return;
    setSelectedImageIndex((prev) => prev - 1);
  }

  return (
    <div className="flex flex-col gap-6 pt-[1747px] pb-[96px]" {...handlers}>
      {/* <div className="flex flex-col gap-6 pt-[1108.5px]" {...handlers}> */}
      <div className="relative col-span-full overflow-x-hidden flex flex-col h-[892px] border-b">
        {/* <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] "> */}
        <div
          className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
          style={{
            right: `${rightImageOffset}`,
          }}
        >
          {images.map((image) => (
            <img
              ref={imageRef}
              src={image.src}
              alt=""
              key={image.id}
              className="rounded-2xl sm:aspect-[6.6/3.7] object-cover pointer-events-none select-none"
            />
          ))}
        </div>
        <Button
          isCircleRounded
          onClick={prev}
          icon={<LeftArrowSliderIcon />}
          className="absolute text-[#73787C] top-[calc(50%-22px)] left-8 hidden sm:block"
        />
        <Button
          isCircleRounded
          onClick={next}
          icon={<RightArrowSliderIcon />}
          className="absolute text-[#73787C] top-[calc(50%-22px)] right-8 hidden sm:block"
        />
      </div>
      <div className="self-center gap-[4px] sm:hidden flex zoom-280">
        {images.map((image, index) => (
          <div
            key={image.id}
            className={`transition-all duration-300 ease-in-out rounded-full h-[8px]  ${
              index - 1 === selectedImageIndex
                ? "w-[24px] bg-[#0D1922]"
                : "w-[8px] bg-[#0D192266]"
            }`}
          ></div>
        ))}
      </div>
    </div>
  );
};

export default ZoneSlider;