import Slider, { CustomArrowProps } from "react-slick";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "../../../../@/lib/utils";

export interface CarouselProps {
  showPrevNext?: boolean;
  infinite?: boolean;
  data: string[];
}
function SampleNextArrow(props: CustomArrowProps) {
  const { className, style, onClick } = props;
  console.log(className);
  return (
    <div
      className={cn(
        className,
        "opacity-0 transition-opacity duration-100 ease-linear !flex rounded-full !absolute !top-[40%] !content-none before:!content-none !bg-white/80 hover:!bg-white !h-6 !w-6 sm:!h-9 sm:!w-9 !right-4 sm:!right-9  "
      )}
      style={style}
      onClick={onClick}
    >
      <ChevronRight className="text-mono-900 sm:w-9 sm:h-9" />
    </div>
  );
}

function SamplePrevArrow(props: CustomArrowProps) {
  const { className, style, onClick } = props;
  return (
    <div
      className={cn(
        className,
        "opacity-0 transition-opacity duration-100 ease-linear !flex rounded-full !absolute !top-[40%] !content-none before:!content-none !bg-white/80 hover:!bg-white !h-6 !w-6 sm:!h-9 sm:!w-9 !z-20 !left-4 sm:!left-9"
      )}
      style={style}
      onClick={onClick}
    >
      <ChevronLeft className="text-mono-900 sm:w-9 sm:h-9" />
    </div>
  );
}
export const Carousel = ({
  showPrevNext,
  infinite = false,
  data,
}: CarouselProps) => {
  const settings = {
    customPaging: function (i: number) {
      return (
        <a className="!overflow-hidden">
          <img className="!h-[112px] !min-w-[112px] rounded-md" src={data[i]} />
        </a>
      );
    },
    arrows: showPrevNext,
    dots: true,
    dotsClass:
      "!flex image-grid max-w-full mt-3 sm:!mt-5.5 !items-center justify-between !overflow-auto !no-scrollbar gap-4 sm:gap-8",
    infinite: infinite,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    afterChange: () => {
      const activeElement = document.querySelectorAll(
        ".image-grid .slick-active"
      )[0] as any;
      const dotsContainer = document.querySelectorAll(".image-grid")[0] as any;
      var middle =
        activeElement.children[
          Math.floor((activeElement.children.length - 1) / 2)
        ];
      dotsContainer.scroll({
        left:
          middle?.offsetLeft +
          middle?.offsetWidth / 2 -
          dotsContainer?.offsetWidth / 2,
        behavior: "smooth",
      });
    },
  };
  return (
    <div className="">
      <Slider {...settings}>
        {data?.map((image, index) => {
          return (
            <img className="max-h-[670px] rounded-md w-full" src={image} />
          );
        })}
      </Slider>
    </div>
  );
};
