"use client";
import Image from "next/image";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Swiper, SwiperSlide } from "swiper/react";
import { useRouter } from "next/navigation";
import { useDispatch } from "react-redux";
import Link from "next/link";
import { Navigation, Autoplay, Pagination } from "swiper/modules";
import axios from "../../utils/axios-config";
import { useEffect, useRef } from "react";
import { fetchCategoryId, fetchCategoryName } from "@/store/category/actions";
import CategoriesSkeleton from "../skeletons/skeleton-categories";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { useLocale } from "next-intl";

function Services({ categories }: { categories: any[] }) {
  const locale = useLocale();
  const swiperRef = useRef<any>(null);
  const router = useRouter();
  const dispatch = useDispatch();

  // useEffect(()=>{
  //   const fetchData = async () => {
  //     try {
  //       const response = await axios.get('/categories'); // Replace with your endpoint
  //       console.log(response?.data)

  //     } catch (err) {

  //     }
  //   };
  //   fetchData()
  // },[])

  const descriptions = [
    "Wellbeing",
    "Men",
    "Women",
    "Child",
    "Care",
    "Protection",
    "Wellbeing",
    "Men",
    "Women",
    "Child",
    "Care",
    "Protection",
    "Wellbeing",
    "Men",
    "Women",
    "Child",
    "Care",
    "Protection",
  ];

  return (
    <section className="py-[0px] ">
      {categories.length > 0 ? (
        <div className="container relative mx-auto px-4 mb-4">
          <div className="absolute top-[22%] w-full left-0 md:left-[10.25%] md:w-[79.5%] h-full  flex  ">
            <div className="swiper-buttons w-full   flex  justify-between gap-2 rtl:flex-row-reverse">
              <button className="swiper-button-prev-custom z-20 w-[30px] hover:w-[40px] text-primary bg-white hover:bg-primary hover:text-white h-[100px] rounded-r-sm transition-all duration-300 ease-in-out shadow-custom-slider  flex justify-center items-center">
                <IoIosArrowBack className=" text-[30px]" />
              </button>

              <button className="swiper-button-next-custom z-20 w-[30px] hover:w-[40px] text-primary bg-white hover:bg-primary hover:text-white h-[100px] rounded-l-sm transition-all duration-300 ease-in-out shadow-custom-slider  flex justify-center items-center">
                <IoIosArrowForward className=" text-[30px]" />
              </button>
            </div>
          </div>
          <div className="w-full md:w-[80%] mx-auto mb-4">
            <Swiper
              slidesPerView={2}
              // spaceBetween={5}
             breakpoints={{
  0: { slidesPerView: 2 },
  650: { slidesPerView: 3 },
  1000: { slidesPerView: 5 }
}}
              //  centeredSlides={true}
              loop={true}
              pagination={{
                clickable: true,
                type: "bullets",
                dynamicBullets: true,
              }}
              navigation={{
                nextEl: ".swiper-button-next-custom",
                prevEl: ".swiper-button-prev-custom",
              }}
              autoplay={{
                delay: 2000,
                disableOnInteraction: false,
              }}
              modules={[Navigation, Pagination, Autoplay]}
              className="swiper w-full"
              onSwiper={(swiper) => (swiperRef.current = swiper)} // Store Swiper instance
            >
              {categories.map((item, index) => (
                <SwiperSlide
                  className="!min-w-[150px] mb-8"
                  key={index}
                  onMouseEnter={() => swiperRef.current?.autoplay.stop()} // Stop autoplay
                  onMouseLeave={() => swiperRef.current?.autoplay.start()} // Restart autoplay
                >
                  <div
                    className="aspect-[1/1] relative flex justify-center flex-col items-center "
                    onClick={() => {
                      const str = item.name.includes(" ")
                        ? item.name.replace(/ /g, "_")
                        : item.name;

                      dispatch(fetchCategoryId(item.id));
                      dispatch(fetchCategoryName(item.name));
                      //  router.push(`/${locale}/categories/${str}`);
                    }}
                  >
                    <Link
                      href={`/${locale}/categories/${(item?.name).replace(
                        / /g,
                        "_"
                      )}?id=${item?.id}`}
                      locale={false}
                      className="absolute w-full h-full top-0 left-0 z-[99]"
                    ></Link>
                    {/* <div className="bg-[#defffc] mb-2 relative w-[120px] h-[120px]  rounded-[50%] flex items-center justify-center"> */}
                    <Image
                      src={item?.image}
                      alt={item.name}
                      width={200}
                      height={200}
                      sizes="(max-width: 640px) 100px,
       (max-width: 1024px) 150px,
       200px"
                      className="object-contain p-[10px]"
                      priority={index === 0}

                      // loading="lazy"
                    />
                    {/* </div> */}
                    <h4 className="text-base sm:text-lg text-[#424242] text-center">
                      {item?.name}
                    </h4>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
      ) : (
        <CategoriesSkeleton />
      )}
    </section>
  );
}

export default Services;