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

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

import "swiper/css";
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 STEP = 4;
  const [showAll, setShowAll] = useState(false);
  const sectionRef = useRef(null); // Ref for scrolling to top

  const dispatch = useDispatch();
  const productdata = useSelector((state) => state.product.allOurProducts);
  const products = productdata || [];
  const allproduct = useSelector((state) => state.product.allProducts);

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

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

  const visibleProducts = showAll ? products : products.slice(0, STEP);

  const handleToggle = () => {
    if (showAll && sectionRef.current) {
      sectionRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
    }
    setShowAll(!showAll);
  };

  const prevRef = useRef(null);
  const nextRef = useRef(null);
  return (
    <section className="Our_choices margin-t" ref={sectionRef}>
      {allproduct?.data?.length > 0 && (
        <div className="category_heading_row">
          <div className="heading_holder text-center">
            <h4 className="heading_text">Related Products</h4>
          </div>

          <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="Our_choices_holder">
        {/* <div className="row">
          {allproduct?.data?.length > 0 &&
            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 (
                <div
                  className="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-6 px-md-2 col-12 mb-3"
                  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}
                  />
                </div>
              );
            })}
        
        </div> */}
        <Swiper
          modules={[Navigation, Autoplay]}
          spaceBetween={10}
          slidesPerView={2}
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          navigation={{
            prevEl: prevRef.current,
            nextEl: nextRef.current,
          }}
          breakpoints={{
            0: {
              slidesPerView: 2,
            },

            576: {
              slidesPerView: 3,
            },
            768: {
              slidesPerView: 4,
            },
            992: {
              slidesPerView: 5,
            },
            1200: {
              slidesPerView: 6,
              spaceBetween: 10,
            },
          }}
          className="related_product_swiper"
        >
          {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}
                  variant={activeVariant || ""}
                  savingPrice={
                    parseFloat(activeVariant?.mrp || 0) -
                    parseFloat(activeVariant?.price || 0)
                  }
                  priceText={activeVariant?.price || 0}
                  mrp={activeVariant?.mrp}
                />
              </SwiperSlide>
            );
          })}
        </Swiper>
        {/* {allproduct?.data?.length > STEP && (
          <div className="see_more_btn_holder text-center mt-4">
            <Green_round_btn
              btnText={showAll ? "See Less" : "See More"}
              onClick={handleToggle}
            />
          </div>
        )} */}
      </div>
    </section>
  );
}

export default Our_choices;
