"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 FourCard from "@/modules/ui/four-card";
import { ProductItemModel } from "@/lib/types/models/product";

type SwiperComponentProps = {
  id: string;
  data: ProductItemModel[];
};
export default function Page(props: SwiperComponentProps) {
  const { data, id } = 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={4}
        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: 4,
            spaceBetween: 24,
          },
        }}
        className="!p-1"
        id="similar-products"
        modules={[Navigation]}
        navigation={{
          nextEl: ".similar-products-button-next",
          prevEl: ".similar-products-button-prev",
          disabledClass: "swiper-button-disabled",
        }}
      >
        {data

          .map((item, i) => (
            <SwiperSlide key={i}>
              <FourCard
                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] similar-products-button-prev"
        onClick={handlePrev}
      />
      <NavigationButton
        className="rotate-180 absolute z-10 top-[50%] right-[-12px] similar-products-button-next"
        onClick={handleNext}
      />
    </>
  );
}