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 { Autoplay, Navigation } from "swiper/modules";
import Common_Heading_Holder from "../../common-components/common_heading_holder/Common_Heading_Holder";
import { getGroupByProduct } from "../../../features/products/productsSlice";
import { getAllCategories } from "../../../features/master/masterSlice";
import Explore_Category_Card from "../explore_by_category/explore_category_card/Explore_Category_Card";

const Explore_By_Category = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getGroupByProduct());
  }, [dispatch]);
  const categories = useSelector((state) => state.master.categories);
  useEffect(() => {
    dispatch(getAllCategories());
  }, [dispatch]);

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

  return (
    <section className=" Explore_By_Category Explore_By_Categoryyy">
      <div className="header-wrapper">
        <Common_Heading_Holder
          headingText={"Shop by Pet"}
          subtext={"Find the best products for your pet"}
        />
      </div>
      <div className="white_card_div">
        <div className="row">
          <div className=" design_1 category_swiper_holder">
            {categories?.length > 0 ? (
              <div className="mb-md-4 mb-2">
                <Swiper
                  modules={[Autoplay, Navigation]}
                  navigation={{
                    prevEl: prevRef.current,
                    nextEl: nextRef.current,
                  }}
                  onBeforeInit={(swiper) => {
                    swiper.params.navigation.prevEl = prevRef.current;
                    swiper.params.navigation.nextEl = nextRef.current;
                  }}
                  autoplay={{
                    delay: 1500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                  }}
                  loop={true}
                  onSwiper={(swiper) => {
                    setTimeout(() => {
                      if (
                        swiper.params.navigation &&
                        typeof swiper.params.navigation !== "boolean"
                      ) {
                        swiper.params.navigation.prevEl = prevRef.current;
                        swiper.params.navigation.nextEl = nextRef.current;

                        swiper.navigation.destroy();
                        swiper.navigation.init();
                        swiper.navigation.update();
                      }
                    });
                  }}
                  spaceBetween={10}
                  slidesPerView={3}
                  breakpoints={{
                    576: { slidesPerView: 3.5 },

                    768: { slidesPerView: 4 },
                    992: { slidesPerView: 5 },
                    1200: { slidesPerView: 7 },
                  }}
                  className="categary_grid_slider py-2"
                >
                  {categories?.map((category, catIndex) => (
                    <SwiperSlide key={catIndex}>
                      <Explore_Category_Card
                        data={category}
                        id={category?.id}
                        img={category?.image}
                        product={category?.name}
                        // goto="/shop"
                        goto={`/shop-subcategory?category_id=${category?.id}&category_image=${category?.image}`}
                      />
                    </SwiperSlide>
                  ))}
                </Swiper>
              </div>
            ) : (
              <p className="text-danger">No products available.</p>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Explore_By_Category;
