import React, { useEffect, useRef } from "react";
import "./Explore_By_Category.css";
import { useDispatch, useSelector } from "react-redux";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Grid, Navigation } from "swiper/modules";
import Common_Heading_Holder from "../../common-components/common_heading_holder/Common_Heading_Holder";
import Product_Info_Card from "../../common-components/product_info_card/Product_Info_Card";
import { getGroupByProduct } from "../../../features/products/productsSlice";
import { variant_type } from "../../../utils/common";
import { useRouter } from "next/navigation";
import {
  getAllCategories,
  getAllHomeCategories,
} from "../../../features/master/masterSlice";
import Explore_Category_Card from "../explore_by_category/explore_category_card/Explore_Category_Card";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
import Home_Category_Card from "../explore_by_category/explore_category_card/Home_Category_Card";
import "swiper/css/grid";
const Explore_By_Category = () => {
  const navigate = useRouter();
  const dispatch = useDispatch();
  const categoryWiseProduct = useSelector(
    (state) => state.product.allProductsGroup,
  );

  useEffect(() => {
    dispatch(getGroupByProduct());
  }, [dispatch]);

  const categories = useSelector((state) => state.master.home_categories);
  useEffect(() => {
    dispatch(getAllHomeCategories());
  }, [dispatch]);

  const prevRef = useRef(null);
  const nextRef = useRef(null);

  return (
    <section className="Explore_By_Category">
      <div className="category_heading_row">
        <Common_Heading_Holder headingText={"Explore by Category"} />

        <div className="common_swiper_navigation">
          <button className="category-swiper-prev" ref={prevRef}>
            <FontAwesomeIcon icon={faAngleLeft} />
          </button>

          <button className="category-swiper-next" ref={nextRef}>
            <FontAwesomeIcon icon={faAngleRight} />
          </button>
        </div>
      </div>
      <div className="white_card_div">
        <div className="white_card_div">
          <Swiper
            modules={[Navigation]}
            navigation={{
              prevEl: prevRef.current,
              nextEl: nextRef.current,
            }}
            spaceBetween={15}
            slidesPerView={3}
            breakpoints={{
              320: {
                slidesPerView: 1.3,
              },
              576: {
                slidesPerView: 2,
              },
              768: {
                slidesPerView: 3,
              },
              992: {
                slidesPerView: 4,
              },
              1200: {
                slidesPerView: 5,
              },
            }}
            className="category_grid_swiper"
          >
            {categories?.map((category, index) => (
              <SwiperSlide key={index}>
                <Home_Category_Card
                  data={category}
                  id={category?.id}
                  img={category?.image}
                  product={category?.name}
                  productCount={category?.product_count || 0}
                />
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </section>
  );
};

export default Explore_By_Category;
