import React, { useEffect } from "react";
import "./Offer_Products.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import { useDispatch, useSelector } from "react-redux";
import { getOfferProduct } from "../../../features/home/homeSlice";
import Common_Heading_Holder from "../../common-components/common_heading_holder/Common_Heading_Holder";
import Product_Info_Card from "../../common-components/product_info_card/Product_Info_Card";
import { variant_type } from "../../../utils/common";
import Common_Heading_Round_holder from "../../common-components/common_Heading_Round_holder/Common_Heading_Round_holder";

const Offer_Products = ({ offerProducts }) => {
  const products = [
    {
      product_name: "Nescafe Classic",
      img: "/assets/images/products/img6.png",
      sub_text: "Price per kg",
      rating: "4.5",
      selling_price: "₹ 120.00",
      mrp: "₹ 150.00",
      discount: "10",
      outOfStock: false,
      company: "Nescafe",
    },

    {
      product_name: "Nescafe Classic",
      img: "/assets/images/products/img6.png",
      sub_text: "Price per kg",
      rating: "4.5",
      selling_price: "₹ 120.00",
      mrp: "₹ 150.00",
      discount: "10",
      outOfStock: true,
      company: "Kellog's",
    },

    {
      product_name: "Nescafe Classic",
      img: "/assets/images/products/img6.png",
      sub_text: "Price per kg",
      rating: "4.5",
      selling_price: "₹ 120.00",
      mrp: "₹ 150.00",
      discount: "10",
      outOfStock: false,
    },

    {
      product_name: "Nescafe Classic",
      img: "/assets/images/products/img6.png",
      sub_text: "Price per kg",
      rating: "4.5",
      selling_price: "₹ 120.00",
      mrp: "₹ 150.00",
      discount: "10",
      outOfStock: false,
    },

    {
      product_name: "Nescafe Classic",
      img: "/assets/images/products/img6.png",
      sub_text: "Price per kg",
      rating: "4.5",
      selling_price: "₹ 120.00",
      mrp: "₹ 150.00",
      discount: "10",
      outOfStock: false,
    },

    {
      product_name: "Nescafe Classic",
      img: "/assets/images/products/img6.png",
      sub_text: "Price per kg",
      rating: "4.5",
      selling_price: "₹ 120.00",
      mrp: "₹ 150.00",
      discount: "10",
      outOfStock: false,
    },

    {
      product_name: "Nescafe Classic",
      img: "/assets/images/products/img6.png",
      sub_text: "Price per kg",
      rating: "4.5",
      selling_price: "₹ 120.00",
      mrp: "₹ 150.00",
      discount: "10",
      outOfStock: false,
    },

    {
      product_name: "Nescafe Classic",
      img: "/assets/images/products/img6.png",
      sub_text: "Price per kg",
      rating: "4.5",
      selling_price: "₹ 120.00",
      mrp: "₹ 150.00",
      discount: "10",
      outOfStock: false,
    },
  ];

  return (
    <section className="Offer_Products">
      <Common_Heading_Round_holder headingText={"Offer Products"} />

      <div className="main_swiper_div">
        <Swiper
          spaceBetween={15}
          pagination={{
            dynamicBullets: true,
            clickable: true,
          }}
          modules={[Pagination]}
          autoplay={{ delay: 300 }}
          className="common_swiper"
          breakpoints={{
            0: {
              slidesPerView: 1.2,
            },
            380: {
              slidesPerView: 1.5,
            },
            480: {
              slidesPerView: 2,
            },
            768: {
              slidesPerView: 3,
            },
            768: {
              slidesPerView: 3,
            },
            992: {
              slidesPerView: 3,
            },
            1200: {
              slidesPerView: 3.5,
            },
            1400: {
              slidesPerView: 4,
            },
          }}
        >
          {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 (
              <SwiperSlide className="product-slide" 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}
                  variant={activeVariant || ""}
                  kgText={metal?.Metal?.name}
                  savingPrice={
                    parseFloat(activeVariant?.mrp || 0) -
                    parseFloat(activeVariant?.price || 0)
                  }
                  showQty
                />
              </SwiperSlide>
            );
          })}
        </Swiper>
      </div>
    </section>
  );
};

export default Offer_Products;

{
  /* <section className='Offer_Products'>
            <Common_Heading_Holder headingText={"Offer Products"} />

            <div className='main_swiper_div'>
                <Swiper
                    spaceBetween={15}
                    pagination={{
                        dynamicBullets: true,
                        clickable: true
                    }}
                    modules={[Pagination]}
                    autoplay={{ delay: 300 }}
                    className="common_swiper"
                    breakpoints={{
                        0: {
                            slidesPerView: 1.2,
                        },
                        380: {
                            slidesPerView: 1.5,
                        },
                        480: {
                            slidesPerView: 2,
                        },
                        768: {
                            slidesPerView: 3,
                        },
                        768: {
                            slidesPerView: 3,
                        },
                        992: {
                            slidesPerView: 3,
                        },
                        1200: {
                            slidesPerView: 3.5,
                        },
                        1400: {
                            slidesPerView: 4,
                        },

                    }}
                >

{
    products?.map((product) => {
        return (
            <SwiperSlide >
                <Product_Info_Card product={product} showQty />
            </SwiperSlide>
        )
    })
}

                </Swiper >
            </div >

        </section> */
}
