import React, { useEffect, useState } from "react";
import ProductCard from "@/components/productList/product_card";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import { Grid, Navigation, Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";

import style from "./categorySlider.module.css";
import { ArrowBackIos, ArrowForwardIos } from "@mui/icons-material";
import Loader from "@/components/utils/loader";
import { useSelector } from "react-redux";
import NextImage from "@/other/NextImage";
import { useRouter } from "next/router";

const CategorySlider = (props) => {
  const category = useSelector((state) => state.categoryStore.category);
  const [selectedCategory, setSelectedCategory] = useState([]);
  const loader = useSelector((state) => state.categoryStore.loader);
  const router = useRouter();
  const ForwardBtn = () => {
    return (
      <ArrowForwardIos className={`swiper-button-next ${style.btn_next}`} />
    );
  };
  const BackBtn = () => {
    return <ArrowBackIos className={`swiper-button-prev ${style.btn_prev}`} />;
  };

  useEffect(() => {
    console.log("category: ", category);
    console.log("yes");
    if (category && category.length > 0) {
      for (const item of category)
        if (item._id === "65e5bd170443ae08a48db98d") {
          setSelectedCategory(item.child);
        }
    }
  }, [category]);

  return (
    <React.Fragment>
      <div className={style.product_section}>
        <div className={style.product_head}>
          {props.title && <div className="primary-heading">{props.title}</div>}
          {category.length > 0 &&
            category.length > props.singleCount &&
            props.navBtn && (
              <div className={style.arrow_nav}>
                <BackBtn />
                <ForwardBtn />
              </div>
            )}
        </div>
        {loader && <Loader className={style.loader} />}
        {!loader && (
          <Swiper
            grid={{
              fill: "row",
            }}
            breakpoints={{
              768: {
                slidesPerView: props.singleCount
                  ? Number(props.singleCount)
                  : 8,
                grid: { rows: 1 },
              },
              0: { slidesPerView: 4, grid: { rows: 1 } },
            }}
            spaceBetween={20}
            modules={[Grid, Navigation, Autoplay]}
            className={style.mySwiper}
            autoplay={{ delay: 4000, disableOnInteraction: false }}
            speed={800}
            navigation={{
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            }}
          >
            {selectedCategory.map((item, index) => (
              <SwiperSlide className={style["swiper_slide"]} key={index}>
                <div
                  className={style.category_card}
                  onClick={() =>
                    router.push(`/store/category[${item._id}]_${item.name}`)
                  }
                >
                  <div className={style.category_image}>
                    <NextImage
                      src={
                        process.env.NEXT_PUBLIC_UPLOADS +
                        "/category/" +
                        item.image
                      }
                      className={style.image}
                      alt=""
                      fill
                    />
                  </div>
                  <div className={style.category_title}>
                    {item.name.replace("Office", "")}
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        )}
        {!loader && category.length == 0 && (
          <p className={style.error}>No Category Available</p>
        )}
      </div>
    </React.Fragment>
  );
};

export default CategorySlider;
