"use client";

import Banner from "./banner/Banner";
import { useDispatch, useSelector } from "react-redux";
import { AllShape, getAllCategories } from "../../features/master/masterSlice";
import { useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import Link from "next/link";
import {
  getAllProducts,
  getGroupByProduct,
} from "../../features/products/productsSlice";
import {
  getCoupons,
  getHomeBanner,
  getHomeShopAndWatch,
} from "../../features/home/homeSlice";
import { getAboutUs } from "../../features/aboutus/aboutusSlice";

import Popular_Product from "./popular_product/Popular_Product";
import Explore_By_Category from "./explore_by_category/Explore_By_Category";
import Offers_Slider from "./offers_slider/Offers_Slider";
import Common_Product_Swiper from "../common-components/common_product_swiper/Common_Product_Swiper";
import New_In_Store from "./new_in_store/New_In_Store";
import Banner_Btn_Component from "./banner_btn_component/Banner_Btn_Component";
import "./Homepage.css";
import { useRouter } from "next/navigation";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight, faSortDown } from "@fortawesome/free-solid-svg-icons";
import Offer_Products from "./offer_products/Offer_Products";
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";

function Homepage() {
  const category = useSelector((state) => state.master.categories);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllCategories());
  }, [dispatch]);

  const banner = useSelector((state) => state.home.banners);

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

  const about_us = useSelector((state) => state.aboutus.about_us);

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

  const shapes = useSelector((state) => state.master.all_shape);

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

  const watch_and_shop = useSelector(
    (state) => state.home.all_home_shop_and_watch,
  );

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

  const navigate = useRouter();

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

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

  const categoryWiseProduct = useSelector(
    (state) => state.product.allProductsGroup,
  );
  useEffect(() => {
    dispatch(getGroupByProduct({}));
  }, [dispatch]);

  const coupons = useSelector((state) => state.home.addCoupons);

  useEffect(() => {
    dispatch(getCoupons({}));
  }, [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">
                  <Banner banner={banner} />
                  {/* <Explore_By_Category /> */}

                  <div className="my-4 Our_Product_section">

  <Common_Heading_Round_holder headingText={"Our Products"} />


  <div className="product_swiper_holder">

    <Swiper
      modules={[Navigation]}
      navigation
      spaceBetween={15}
      slidesPerView={5}

      breakpoints={{
        1400: {
          slidesPerView: 5,
        },

        1200: {
          slidesPerView: 4,
        },

        992: {
          slidesPerView: 3,
        },

        768: {
          slidesPerView: 2,
        },

        576: {
          slidesPerView: 2,
        },

        0: {
          slidesPerView: 2,
        },
      }}
    >

      {newInStore?.data?.slice(0,10)?.map((product,index)=>{

        const activeVariant = product?.Product_Variants?.[0];


        return (

          <SwiperSlide 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
            />

          </SwiperSlide>

        )

      })}


    </Swiper>


    <div className="see_all_holder">
      <Link href="/all-products/">
        <button className="see_all_btn">
          See All
          <span>
            <FontAwesomeIcon icon={faCaretRight}/>
          </span>
        </button>
      </Link>
    </div>


  </div>

</div>

                  <Offers_Slider data={coupons} />

                  <Banner_Btn_Component />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Homepage;
