import React, { useEffect, useRef, useState } from "react";
import "./Our_choices.css";

import { useDispatch, useSelector } from "react-redux";
import { getAllProducts } from "../../../features/products/productsSlice";
import Product_Info_Card from "../../common-components/product_info_card/Product_Info_Card";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Navigation, Autoplay } from "swiper/modules";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { variant_type } from "../../../utils/common";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";

function Our_choices({ product }) {
  const sectionRef = useRef(null); // Ref for scrolling to top
  const dispatch = useDispatch();
  const allproduct = useSelector((state) => state.product.allProducts);

  useEffect(() => {
    const categoryId = product?.p_category?.id;
    if (!categoryId) return;
    dispatch(getAllProducts({ category_id: categoryId }));
  }, [dispatch, product?.p_category?.id]);

  const [swiperInstance, setSwiperInstance] = useState(null);
  useEffect(() => {
    if (swiperInstance && prevRef.current && nextRef.current) {
      swiperInstance.params.navigation.prevEl = prevRef.current;
      swiperInstance.params.navigation.nextEl = nextRef.current;

      swiperInstance.navigation.destroy();
      swiperInstance.navigation.init();
      swiperInstance.navigation.update();
    }
  }, [swiperInstance]);
  const prevRef = useRef(null);
  const nextRef = useRef(null);
  return (
    <section
      className="Our_choices margin-t Explore_By_Category "
      ref={sectionRef}
    >
      <div className="header-wrapper heading_holder text-center">
        <h4 className="heading_text">Related Products</h4>
        <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 className="Our_choices_holder">
        <Swiper
          className="mySwiper"
          onSwiper={setSwiperInstance}
          modules={[Pagination, Navigation, Autoplay]}
          navigation={{
            prevEl: prevRef.current,
            nextEl: nextRef.current,
          }}
          autoplay={{
            delay: 2000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          }}
          loop={true}
          breakpoints={{
            0: {
              slidesPerView: 2,
              spaceBetween: 10,
            },
            350: {
              slidesPerView: 2,
              spaceBetween: 10,
            },
            486: {
              slidesPerView: 2.5,
              spaceBetween: 10,
            },
            576: {
              slidesPerView: 2.5,
              spaceBetween: 10,
            },
            768: {
              slidesPerView: 3.5,
              spaceBetween: 10,
            },
            992: {
              slidesPerView: 4.8,
              spaceBetween: 10,
            },
            1200: {
              slidesPerView: 5.3,
              spaceBetween: 10,
            },
            1300: {
              slidesPerView: 6,
              spaceBetween: 10,
            },
          }}
        >
          {allproduct?.data?.map((product, index) => {
            let metal;
            let size;
            let 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={product.id || index}>
                <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}
                  kgText={metal?.Metal?.name}
                  savingPrice={
                    parseFloat(activeVariant?.mrp || 0) -
                    parseFloat(activeVariant?.price || 0)
                  }
                  priceText={activeVariant?.price || 0}
                  mrp={activeVariant?.mrp}
                />
              </SwiperSlide>
            );
          })}
        </Swiper>
      </div>
    </section>
  );
}

export default Our_choices;
