"use client";

import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import "./All_products.css";
import { useRouter } from "next/navigation";
import Product_Info_Card from "../common-components/product_info_card/Product_Info_Card";
import Common_Heading_Round_holder from "../common-components/common_Heading_Round_holder/Common_Heading_Round_holder";
import { getAllProducts } from "../../features/products/productsSlice";

function All_products() {
  const dispatch = useDispatch();


  const navigate = useRouter();

  const newInStore = useSelector((state) => state.product.allProducts);

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



  return (
    <>
      <section className="Home">
        <div className="container">
          <div className="desktop_view">
            <div className="row me-0 ms-0 ">
              <div className="col-xxl-12 custom_right_col">
                <div className="body_container">
                  <div className="my-4">
                    <Common_Heading_Round_holder headingText={"All Products"} />
                    <div className="row">
                      {newInStore?.data?.slice(0, 5)?.map((product, index) => {
                        const activeVariant = product?.Product_Variants?.[0];

                        return (
                          <div
                            className="col-lg-3 col-md-4 col-sm-6 col-6 px-md-2 px-1 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}
                              priceText={activeVariant?.price || 0}
                              mrp={activeVariant?.mrp || 0}
                              kgText={activeVariant?.name}
                              savingPrice={
                                parseFloat(activeVariant?.mrp || 0) -
                                parseFloat(activeVariant?.price || 0)
                              }
                              showQty
                            />
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default All_products;
