"use client";
import { Swiper, SwiperSlide, SwiperRef } from "swiper/react";
import { useRef } from "react";
import NavigationButton from "@/modules/ui/navigation-button";
import { Navigation } from "swiper/modules";
import ThreeCard from "@/modules/ui/three-card";
import { ProductItemModel } from "@/lib/types/models/product";

type SwiperComponentProps = {
  data: ProductItemModel[];
};
export default function Page(props: SwiperComponentProps) {
  const { data } = props;
  const swiperRef = useRef<SwiperRef | null>(null);

  const handleNext = () => {
    if (swiperRef.current) {
      swiperRef.current.swiper.slideNext();
    }
  };

  const handlePrev = () => {
    if (swiperRef.current) {
      swiperRef.current.swiper.slidePrev();
    }
  };
  return (
    <>
      <Swiper
        ref={swiperRef}
        spaceBetween={24}
        slidesPerView={3}
        breakpoints={{
          0: {
            slidesPerView: 1.3,
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          500: {
            slidesPerView: 1.8,
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          640: {
            slidesPerView: 2.3, // 1 slide at a time for mobile
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          768: {
            slidesPerView: 3.5, // 2 slides at a time for tablets
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 24,
          },
        }}
        id="new-arrivals"
        className="!p-1"
        modules={[Navigation]}
        navigation={{
          nextEl: ".new-arrivals-button-next",
          prevEl: ".new-arrivals-button-prev",
          disabledClass: "swiper-button-disabled",
        }}
      >
        {data.map((item, i) => (
          <SwiperSlide key={i}>
            <ThreeCard
              image={item.image}
              id={item?._id}
              name={item.name}
              shortDic={item.shortDescription}
              price={item?.price?.toString()}
              quantity={item?.quantity?.toString()}
              link={
                item?.parentId?.slug
                  ? `/${item?.parentId?.slug}/${item.slug}`
                  : `/${item?.slug}`
              }
              promotionalText={item.promotionalText}
            />
          </SwiperSlide>
        ))}
      </Swiper>
      <NavigationButton
        className="absolute z-10 top-[50%] left-[-12px] new-arrivals-button-prev"
        onClick={handlePrev}
      />
      <NavigationButton
        className="rotate-180 absolute z-10 top-[50%] right-[-12px] new-arrivals-button-next"
        onClick={handleNext}
      />
    </>
  );
}