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 { variant_type } from "../../../utils/common";

function Our_choices() {
  const STEP = 4;
  const [showAll, setShowAll] = useState(false);

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

  const sectionRef = useRef(null); // Ref for scrolling to top

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

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

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

  return (
    <section className="Our_choices margin-t" ref={sectionRef}>
      <div className="heading_holder text-center">
        <h4 className="heading_text">Related Products</h4>
      </div>

      <div className="Our_choices_holder">
        <div className="row">
          {visibleProducts?.length > 0 &&
            visibleProducts.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-lg-3 col-md-4 col-sm-6 col-6 px-md-2 px-1"
                  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>
              );
            })}
          {/* {visibleProducts?.map((product, index) => (
            <div
              className="col-lg-3 col-md-4 col-sm-6 col-6 px-md-2 px-1"
              key={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}
                priceText={product.Product_Variants[0]?.price}
                mrp={product.Product_Variants[0]?.mrp}
                kgText={product.Product_Variants[0]?.name}
                savingPrice={
                  parseFloat(product.Product_Variants[0]?.mrp || 0) -
                  parseFloat(product.Product_Variants[0]?.price || 0)
                }
              />
            </div>
          ))} */}
        </div>

        {productdata.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;
