import React, { useEffect, useRef, useState } from "react";
import "./May_you_like_also.css";
import Product_card from "../../common-components/product_card/Product_card";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import Order_summery_holder from "./order_summery_holder/Order_summery_holder";
import { Navigation } from "swiper/modules";
import { useDispatch, useSelector } from "react-redux";
import { getAllProducts } from "../../../features/products/productsSlice";

import Product_Info_Card from "../../common-components/product_info_card/Product_Info_Card";
import { variant_type } from "../../../utils/common";

function May_you_like_also({ data, instock }) {
  const dispatch = useDispatch();
  const productdata = useSelector((state) => state.product.allProducts);
  useEffect(() => {
    dispatch(
      getAllProducts({
        // name: searchTerm,
      }),
    );
  }, [dispatch]);

  return (
    <section className="May_you_like_also">
      <div className="container">
        <div className="row custom_row">
          <div className="col-md-6">
            <div className="heading_holder">
              <h4 className="heading_text">MAY YOU ALSO LIKE</h4>
            </div>
            <Swiper
              modules={[Pagination, Navigation, Autoplay]}
              // navigation={true}
              spaceBetween={16}
              slidesPerView={2}
              // pagination={{ clickable: true }}
              autoplay={{
                delay: 3000, // 3 seconds
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
              }}
              breakpoints={{
                576: { slidesPerView: 2 },
                768: { slidesPerView: 1.5 },
                992: { slidesPerView: 1.9 },
                1200: { slidesPerView: 2 },
              }}
            >
              {/* {productdata?.data?.map((product, index) => ( */}
              {productdata?.data?.length > 0 ? (
                productdata?.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={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={metal?.Metal?.name}
                        savingPrice={
                          parseFloat(activeVariant?.mrp || 0) -
                          parseFloat(activeVariant?.price || 0)
                        }
                      />
                    </SwiperSlide>
                  );
                })
              ) : (
                <div
                  style={{
                    textAlign: "center",
                    padding: "20px",
                    fontWeight: "bold",
                    width: "100%",
                    color: "#000",
                  }}
                >
                  Product Not Available
                </div>
              )}
              {/* ))} */}
            </Swiper>
          </div>
          <div className="col-md-6">
            <Order_summery_holder instock={instock} data={data} />
          </div>
        </div>
      </div>
    </section>
  );
}

export default May_you_like_also;
