import React, { useEffect, useState } from "react";
import AOS from "aos";
import "aos/dist/aos.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

import "./All_Time_Fav.css";
import Product_card from "../../common-components/product_card/Product_card";
import Green_round_btn from "../../common-components/common_btn/green_round_btn/Green_round_btn";
import { useNavigate } 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";
import { useSelector } from "react-redux";

function All_Time_Fav({ products }) {
  const navigate = useNavigate();
  const [swiperInstance, setSwiperInstance] = useState(null);

  const handleToggle = () => {
    navigate("/categories");
  };

  useEffect(() => {
    AOS.init({
      duration: 1000,
      once: true,
      disable: false,
      startEvent: "DOMContentLoaded",
      mirror: true,
      offset: 0,
    });
    AOS.refresh();
  }, []);




  return (
    <section className="All_Time_Fav">
      <div className="container-fluid">
        <h4 className="heading_text">Recommend for you</h4>

        <div className="all_prods_holder">
          {products && products.length > 0 ? (
            <Swiper
              className="mySwiper"
              onSwiper={(swiper) => setSwiperInstance(swiper)}
              pagination={{
                dynamicBullets: true,
                clickable: true,
              }}
              loop={true}
              autoplay={{
                delay: 2000,
                disableOnInteraction: false,
              }}
              modules={[Pagination, Navigation, Autoplay]}
              breakpoints={{
                0: { slidesPerView: 2, spaceBetween: 5 },
                350: { slidesPerView: 2, spaceBetween: 5 },
                486: { slidesPerView: 2, spaceBetween: 5 },
                576: { slidesPerView: 2, spaceBetween: 10 },
                768: { slidesPerView: 3, spaceBetween: 10 },
                992: { slidesPerView: 4, spaceBetween: 10 },
                1200: { slidesPerView: 5, spaceBetween: 10 },
              }}

            >
              {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}
                       variant={activeVariant || ""}
                      priceText={activeVariant?.price || 0}
                      mrp={activeVariant?.mrp || 0}
                      kgText={metal?.Metal?.name}
                      savingPrice={
                        parseFloat(activeVariant?.mrp || 0) -
                        parseFloat(activeVariant?.price || 0)
                      }
                    />
                  </SwiperSlide>

                );
              })}

            </Swiper>
          ) : (
            <div className="no_product_available_holder text-center w-100">
              <h3>No Product Added In Recommend for you</h3>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

export default All_Time_Fav;
