"use client";
import { Swiper, SwiperSlide, SwiperRef } from "swiper/react";
import Image from "next/image";
import { useCallback, useEffect, useRef } from "react";
import NavigationButton from "@/modules/ui/navigation-button";
import Link from "next/link";
import categoryService from "@/lib/services/category";
import { useCategoryStore } from "@/zustand/categoryStore";
import { Navigation } from "swiper/modules";
type CategoryProps = {
  title?: string;
  category?: string;
};
export default function Page(props: CategoryProps) {
  const swiperRef = useRef<SwiperRef | null>(null);
  const { title = "Explore all categories", category = "" } = props;
  const { categories } = useCategoryStore();
  useEffect(() => {
    if (swiperRef.current) {
      swiperRef.current.swiper.init();
    }
    categoryService.fetchCategories();
  }, []);

  const handlePrev = useCallback(() => {
    if (!swiperRef.current) return;
    swiperRef.current.swiper.slidePrev();
  }, []);

  const handleNext = useCallback(() => {
    if (!swiperRef.current) return;
    swiperRef.current.swiper.slideNext();
  }, []);

  return (
    <>
      <div className="mobile-container flex justify-between">
        <h2 className="text-[20px] lg:text-[32px] leading-[25.2px] lg:leading-[42.84px] text-neutral-black-87 mb-[20px] md:mb-[36px] font-semibold">
          {title}
        </h2>
        <div className="flex gap-2">
          <NavigationButton
            className="explore-all-categories-button-prev"
            onClick={handlePrev}
          />
          <NavigationButton
            className="explore-all-categories-button-next rotate-180"
            onClick={handleNext}
          />
        </div>
      </div>
      <Swiper
        ref={swiperRef}
        id="explore-all-categories"
        slidesPerView={7.5}
        breakpoints={{
          300: {
            slidesPerView: 2.5,
            spaceBetween: 10,
            slidesOffsetBefore: 20,
          },
          500: {
            slidesPerView: 3.5,
            spaceBetween: 24,
            slidesOffsetBefore: 20,
          },
          640: {
            slidesPerView: 4.5, // 1 slide at a time for mobile
            spaceBetween: 10,
            slidesOffsetBefore: 20,
          },

          768: {
            slidesPerView: 5.5, // 2 slides at a time for tablets
            spaceBetween: 20,
            slidesOffsetBefore: 20,
          },
          1024: {
            slidesPerView: 8.5,
            spaceBetween: 24,
          },
        }}
        modules={[Navigation]}
        navigation={{
          nextEl: ".explore-all-categories-button-next",
          prevEl: ".explore-all-categories-button-prev",
          disabledClass: "swiper-button-disabled",
        }}
      >
        {categories
          .filter((item) => item.slug !== category)
          .map((item, i) => (
            <SwiperSlide key={i}>
              <Link
                href={`/${item.slug}`}
                className="group flex flex-col items-center  w-[123px]"
              >
                <div className="w-full mb-3 bg-[#F2F3F8] flex justify-center items-center rounded-full h-[123px] w-[123px]">
                  {item.image && (
                    <Image
                      alt="banner"
                      loading="lazy"
                      quality={50}
                      width={123}
                      height={123}
                      decoding="async"
                      className="!h-[123px] object-cover rounded-full"
                      src={item.image}
                    />
                  )}
                </div>
                <div className="flex justify-center">
                  <h3 className="inline-block font-medium text-center text-[15px] lg:text-[18px] leading-[18.9px] lg:leading-[25.2px] text-neutral-black-87  bg-gradient-to-r from-primary to-primary bg-[length:0px_1px] bg-left-bottom bg-no-repeat transition-[background-size] duration-500  group-hover:text-primary">
                    {item.name}
                  </h3>
                </div>
              </Link>
            </SwiperSlide>
          ))}
      </Swiper>
    </>
  );
}