import React, { useEffect, useRef, useState } from "react";

import "./Product_vdo_preview.css";
import Product_vdo_card from "../../common-components/product_vdo_card/Product_vdo_card";
import { useDispatch, useSelector } from "react-redux";
import { getAllProducts } from "../../../features/products/productsSlice";
import Green_round_btn from "../../common-components/common_btn/green_round_btn/Green_round_btn";
import { useLocation } from "react-router-dom";
import Product_Info_Card from "../../common-components/product_info_card/Product_Info_Card";
import Green_btn from "../../common-components/common_btn/green_btn/Green_btn";
import ScrollAnimation from "react-animate-on-scroll";
import { variant_type } from "../../../utils/common";

function Product_vdo_preview({ product }) {
  const location = useLocation();
  const dispatch = useDispatch();
  const productdata = useSelector((state) => state.product.allProducts);
  const products = productdata?.data || [];

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

  const sectionRef = useRef(null);

  useEffect(() => {
    if (product?.p_category_id) {
      dispatch(getAllProducts({ category_id: product.p_category_id }));
    } else {
      dispatch(getAllProducts({}));
    }
  }, [dispatch, product]);

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

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

  return (
    <div className="Product_vdo_preview All_Time_Fav" ref={sectionRef}>
      <div className="container-fluid">
        <h4 className="heading_text">All Products</h4>

        <div className="all_prods_holder">
          {products && products.length > 0 ? (
            <div className="row">
              {products.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-6 p-1"
                    key={product?.id || index}
                  >
                    {/* <ScrollAnimation animateIn="fadeInUp"> */}
                    <div className="product_card_holder">
                      <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={activeVariant?.price || 0}
                        mrp={activeVariant?.mrp || 0}
                        kgText={metal?.Metal?.name}
                        savingPrice={
                          parseFloat(activeVariant?.mrp || 0) -
                          parseFloat(activeVariant?.price || 0)
                        }
                      />
                    </div>
                    {/* </ScrollAnimation> */}
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="no_product_available_holder text-center w-100">
              <h3>No Product Available</h3>
            </div>
          )}
        </div>

        {/* <>
          <div className="heading_holder">
            <h4>
              {location.pathname === "/" ? "All Products" : "Similar Products"}
            </h4>
          </div>

          <div className="row">
            {products && products.length > 0 ? (
              visibleProducts.map((product) => (
                <div
                  className="col-lg-3 col-md-4 col-sm-6 col-6 px-md-2 px-1"
                  key={product.id}
                >
                  <Product_vdo_card
                    product_id={product.id}
                    product_vdo={product?.image}
                    product_icon={product?.image}
                    productName={product?.name}
                    productPrice={product?.Product_Variants[0]?.price}
                    productMrp={product?.Product_Variants[0]?.mrp}
                  />
                </div>
              ))
            ) : (
              <div className="no_product_available_holder text-center w-100">
                <h3>No Product Found</h3>
              </div>
            )}
          </div>

          {products.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>
    </div>
  );
}

export default Product_vdo_preview;
