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 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 } 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";

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.categories);
  useEffect(() => {
    dispatch(getAllCategories());
  }, [dispatch]);

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

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

      <div className="white_card_div">
        <div className="row">
          <div className="col-xxl-10 col-xl-10 col-lg-10 col-sm-9 design_1 category_swiper_holder">
            {categories?.length > 0 ? (
              <div className="mb-4">
                <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;
                  }}
                  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 },
                    768: { slidesPerView: 4 },
                    992: { slidesPerView: 5 },
                    1200: { slidesPerView: 6 },
                  }}
                  className="categary_grid_slider"
                >
                  {categories?.map((category, catIndex) => (
                    <SwiperSlide key={catIndex}>
                      <Explore_Category_Card
                        data={category}
                        id={category?.id}
                        img={category?.image}
                        product={category?.name}
                        goto="/shop"
                      />
                    </SwiperSlide>
                  ))}
                </Swiper>
              </div>
            ) : (
              <p className="text-danger">No products available.</p>
            )}
          </div>
          <div className="col-xxl-2 col-xl-2 col-lg-2 col-sm-3 ps-0">
            <div className="swiper_btns_holder">
              <div className="sq1">
                <button className="category-swiper-prev" ref={prevRef}>
                  <FontAwesomeIcon icon={faAngleLeft} />
                </button>
              </div>
              <div className="sq1 sq2">
                <button className="category-swiper-next"  ref={nextRef}>
                  <FontAwesomeIcon icon={faAngleRight} />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* old category wise product */}

        {/* {categoryWiseProduct?.data?.length > 0 ? (
              categoryWiseProduct.data.map((category, catIndex) => (
                <div key={catIndex} className="mb-4">

                  
                  <div className="category_heading_holder">
                    <h5 className="category_heading_text">
                      {category?.name}
                    </h5>
                  </div>

                  <Swiper
                    modules={[Autoplay]}
                    spaceBetween={10}
                    slidesPerView={2}
                    breakpoints={{
                      485: { slidesPerView: 2 },
                      768: { slidesPerView: 3 },
                      992: { slidesPerView: 4 },
                      1200: { slidesPerView: 5 },
                    }}
                    className="categary_grid_slider"
                  >
                    {category?.Products?.map((product, index) => {
                      let metal, size, triple;

                      if (
                        Number(product?.variant_type_id) ===
                        Number(variant_type.Single)
                      ) {
                        metal = product?.Product_Variants?.[0];
                      } else if (
                        Number(product?.variant_type_id) ===
                        Number(variant_type.Double)
                      ) {
                        metal = product?.Product_Variants?.[0];
                        size = metal?.Double_Variants?.[0];
                      } else if (
                        Number(product?.variant_type_id) ===
                        Number(variant_type.Triple)
                      ) {
                        metal = product?.Product_Variants?.[0];
                        size = metal?.Double_Variants?.[0];
                        triple = size?.Triple_Variants?.[0];
                      }

                      const activeVariant = triple || size || metal;

                      return (
                        <SwiperSlide key={index}>
                          <div className="grid_view">
                            <Product_Info_Card
                              product={product}
                              id={product?.id}
                              imgSrc={
                                process.env.NEXT_PUBLIC_IMG_URL + product?.image
                              }
                              vdoSrc={
                                process.env.NEXT_PUBLIC_IMG_URL + product?.video
                              }
                              productName={product?.name}
                              mrp={activeVariant?.mrp || 0}
                              priceText={activeVariant?.price || 0}
                              kgText={activeVariant?.name}
                              savingPrice={
                                parseFloat(activeVariant?.mrp || 0) -
                                parseFloat(activeVariant?.price || 0)
                              }
                              showQty
                            />
                          </div>
                        </SwiperSlide>
                      );
                    })}
                  </Swiper>
                </div>
              ))
            ) : (
              <p className="text-danger">No products available.</p>
            )} */}
      </div>
    </section>
  );
};

export default Explore_By_Category;
