"use client";

import React, { useEffect } from "react";
import "./Wishlist.css";
import Breadcrumb_comp from "../common-components/breadcrumb-comp/Breadcrumb_comp";
import Product_card from "../common-components/product_card/Product_card";
import { getAllWishlist } from "../../features/wishlist/wishlistSlice";
import { useDispatch, useSelector } from "react-redux";
import Product_Info_Card from "../common-components/product_info_card/Product_Info_Card";
import { variant_type } from "../../utils/common";
import { FaHeart, FaShoppingCart } from "react-icons/fa";

function Wishlist() {
  const breadcrumbs = [
    { label: "Home", link: "/", isActive: false },
    { label: "Wishlist", link: "", isActive: true },
  ];

  const allWishlist = useSelector((state) => state.wishlist.allWishlist);
  const dispatch = useDispatch();

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

  return (
    <>
      <section className="Wishlist ">
        {" "}
        <Breadcrumb_comp breadcrumbs={breadcrumbs} />
        <div className="container">
          <div className="">
            {allWishlist?.data?.length > 0 && (
              <div className="heading_holder">
                <h4 className="heading_text"> My Wishlist</h4>
              </div>
            )}
            <div className="row px-1 ">
              {allWishlist?.data?.length > 0 ? (
                allWishlist?.data?.map((product, index) => {
                  // const metal = product.Product?.Product_Variants[0];
                  // const size = metal?.Double_Variants?.[0];
                  // const triple = size?.Triple_Variants?.[0];
                  let metal;
                  let size;
                  let triple;
                  if (
                    Number(product?.Product?.variant_type_id) ===
                    Number(variant_type.Single)
                  ) {
                    metal = product.Product?.Product_Variants[0];
                  } else if (
                    Number(product?.Product?.variant_type_id) ===
                    Number(variant_type.Double)
                  ) {
                    metal = product.Product?.Product_Variants[0];
                    size = metal?.Double_Variants?.[0];
                  } else if (
                    Number(product?.Product?.variant_type_id) ===
                    Number(variant_type.Triple)
                  ) {
                    metal = product.Product?.Product_Variants[0];
                    size = metal?.Double_Variants?.[0];
                    triple = size?.Triple_Variants?.[0];
                  }
                  const activeVariant = triple || size || metal;

                  return (
                    <div
                      className="col-xl-2 col-lg-3 col-md-3 col-sm-4 col-6 mb-2 px-1"
                      key={index}
                    >
                      <Product_Info_Card
                        product={product?.Product}
                        id={product?.Product?.id}
                        imgSrc={
                          process.env.NEXT_PUBLIC_IMG_URL +
                          product?.Product?.image
                        }
                        vdoSrc={
                          process.env.NEXT_PUBLIC_IMG_URL +
                          product?.Product?.video
                        }
                        productName={product.Product?.name}
                        variant={activeVariant || ""}
                        priceText={activeVariant?.price || 0}
                        mrp={activeVariant?.mrp || 0}
                        kgText={metal?.Metal?.name}
                        savingPrice={
                          parseFloat(activeVariant?.mrp || 0) -
                          parseFloat(activeVariant?.price || 0)
                        }
                      />
                    </div>
                  );
                })
              ) : (
                <div className="Common_Not_Found">
                  <div className="not_found_icon">
                    <FaHeart />
                  </div>

                  <h4 className="not_found_title">Your Wishlist is Empty</h4>

                  <p className="not_found_description">
                    You haven't added any products to your wishlist yet.
                  </p>
                </div>
              )}
              {/* {allWishlist?.data?.length > 0 ? (
                allWishlist.data.map((product, index) => (
                  <div className="col-lg-3 col-md-4 col-sm-6 col-6" key={index}>
                    <Product_Info_Card
                      product={product?.Product}
                      id={product?.Product?.id}
                      imgSrc={
                        process.env.NEXT_PUBLIC_IMG_URL + product?.Product?.image
                      }
                      vdoSrc={process.env.NEXT_PUBLIC_IMG_URL + product.video}
                      productName={product?.Product?.name}
                      priceText={product.Product?.Product_Variants[0]?.price}
                      kgText={product?.Product?.Product_Variants[0]?.name}
                      savingPrice={
                        parseFloat(
                          product?.Product?.Product_Variants[0]?.mrp || 0
                        ) -
                        parseFloat(
                          product?.Product?.Product_Variants[0]?.price || 0
                        )
                      }
                    />

                  
                  </div>
                ))
              ) : (
                <div className="no_product_available_holder">
                  <h3>No Product Added In Wishlist</h3>
                </div>
              )} */}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Wishlist;
