"use client";

import Banner from "./banner/Banner";
import { useDispatch, useSelector } from "react-redux";
import {
  AllBrands,
  AllShape,
  getAllCategories,
} from "../../features/master/masterSlice";
import { useEffect } from "react";
import {
  getAllProducts,
  getGroupByProduct,
} from "../../features/products/productsSlice";
import {
  getCoupons,
  getHomeBanner,
  getHomeShopAndWatch,
} from "../../features/home/homeSlice";
import { getAboutUs } from "../../features/aboutus/aboutusSlice";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
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,
  faChevronLeft,
  faChevronRight,
  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 { variant_type } from "../../utils/common";
import Common_Heading_Holder from "../common-components/common_heading_holder/Common_Heading_Holder";
import { myAccount } from "../../features/my_account/Slice";
function Homepage() {
  const category = useSelector((state) => state.master.categories);
  const allbrands = useSelector((state) => state?.master?.brands);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllCategories());
    dispatch(AllBrands());
  }, [dispatch]);

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

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

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

  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({ per_page: 12 }));
  }, [dispatch]);

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

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

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

  useEffect(() => {
    dispatch(myAccount());
  }, [dispatch]);
  return (
    <>
      <section className="Home">
        <Banner banner={banner} />
        <div className="container">
          <div className="desktop_view">
            {/* <div className="col-xxl-2 col-xl-3 col-lg-3">
                <div className="row justify-content-between custom_row me-0 ms-0">
                  <div className="col-lg-12 col-sm-6">
                    <div className="cat_div">
                      <button
                        className="cat_btn"
                        type="button"
                        onClick={() => {
                          navigate.push("/shop");
                        }}
                      >
                        <div className="left_side">
                          <div className="icon_holder">
                            <img
                              src="/assets/images/popular_products/bars.png"
                              className="bar_img"
                            />
                            <img
                              src="/assets/images/popular_products/bar_sort.png"
                              className="sort_bar_img"
                            />
                          </div>

                          <p className="btn_text"> Categories</p>

                          <div className="right_holder">
                            <FontAwesomeIcon
                              icon={faSortDown}
                              className="inner_icon"
                            />
                          </div>
                        </div>
                      </button>
                    </div>

                    <div className="popular_prod">
                      <Popular_Product />
                    </div>
                  </div>
                </div>
              </div> */}
            <div className="custom_right_col">
              <div className="body_container">
                <Explore_By_Category />

                {/* {categoryWiseProduct?.data?.map((val, index) => (
                  <div className="grocery_div" key={index}>
                    <Common_Product_Swiper
                      data={val}
                      // theme_colour={"green"}
                      theme_colour={index % 2 === 0 ? "white" : "gray"}
                      headingText={val?.name}
                    />
                  </div>
                ))} */}

                {/* {categoryWiseProduct?.data?.map((category, index) => (
                  <div className="grocery_div mb-5" key={index}>
                    <div className="heading_holder mb-3">
                      <h4 className="heading_text">{category?.name}</h4>
                    </div>

                    <div className="row">
                      {category?.Products?.slice(0, 8)?.map((product, i) => {
                        let metal;
                        let size;
                        let triple;

                        if (Number(product?.variant_type_id) === 1) {
                          metal = product?.Product_Variants?.[0];
                        } else if (Number(product?.variant_type_id) === 2) {
                          metal = product?.Product_Variants?.[0];
                          size = metal?.Double_Variants?.[0];
                        } else if (Number(product?.variant_type_id) === 3) {
                          metal = product?.Product_Variants?.[0];
                          size = metal?.Double_Variants?.[0];
                          triple = size?.Triple_Variants?.[0];
                        }

                        const activeVariant = triple || size || metal;

                        return (
                          <div
                            className="col-lg-3 col-md-4 col-sm-6 col-6 mb-3"
                            key={product?.id || i}
                          >
                            <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
                            />
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))} */}
                {/* {categoryWiseProduct?.data?.map((category, index) => ( */}
                {categoryWiseProduct?.data
                  ?.slice(0, 3)
                  .map((category, index) => (
                    <div className="grocery_div mb-5" key={index}>
                      <div className="heading_holder common_heading_row mb-4">
                        {/* <h4 className="heading_text">{category?.name}</h4> */}
                        <Common_Heading_Holder headingText={category?.name} />
                        <div className="common_swiper_navigation">
                          <button className={`custom-prev-${index}`}>
                            <FontAwesomeIcon icon={faChevronLeft} />
                          </button>

                          <button className={`custom-next-${index}`}>
                            <FontAwesomeIcon icon={faChevronRight} />
                          </button>
                        </div>
                      </div>

                      <Swiper
                        modules={[Navigation, Autoplay]}
                        navigation={{
                          prevEl: `.custom-prev-${index}`,
                          nextEl: `.custom-next-${index}`,
                        }}
                        autoplay={{
                          delay: 3000,
                          disableOnInteraction: false,
                          pauseOnMouseEnter: true,
                        }}
                        loop={true}
                        spaceBetween={10}
                        breakpoints={{
                          0: {
                            slidesPerView: 2,
                          },

                          576: {
                            slidesPerView: 3,
                          },
                          768: {
                            slidesPerView: 4,
                          },
                          992: {
                            slidesPerView: 5,
                          },
                          1200: {
                            slidesPerView: 6,
                            spaceBetween: 10,
                          },
                        }}
                      >
                        {category?.Products?.map((product, i) => {
                          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={product?.id || i}>
                              <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={activeVariant?.name}
                                savingPrice={
                                  parseFloat(activeVariant?.mrp || 0) -
                                  parseFloat(activeVariant?.price || 0)
                                }
                                showQty
                              />
                            </SwiperSlide>
                          );
                        })}
                      </Swiper>
                    </div>
                  ))}
                <Banner_Btn_Component />
                <Offers_Slider data={allbrands} />

                <New_In_Store data={newInStore?.data} />
                {/* <Offer_Products/> */}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Homepage;
