"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 {
  getAllProducts,
  getGroupByProduct,
  getTopSellingProduct,
} from "../../features/products/productsSlice";
import {
  ComingSoonBanner,
  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 Offer_Products from "./offer_products/Offer_Products";
import Service_Features from "./service_features/Service_Features";
import ComingSoon from "./coming_soon/ComingSoon";
function Homepage() {
  const dispatch = useDispatch();
  const banner = useSelector((state) => state.home.banners);
  const comingbanner = useSelector((state) => state.home.comingsoonbanner);
  const newInStore = useSelector((state) => state.product.allProducts);
  const categoryWiseProduct = useSelector(
    (state) => state.product.allProductsGroup,
  );
  const coupons = useSelector((state) => state.home.addCoupons);
  const topsellingproducts = useSelector(
    (state) => state?.product?.topsellingproducts,
  );

  useEffect(() => {
    dispatch(getAllCategories());
    dispatch(getHomeBanner());
    dispatch(ComingSoonBanner());
    dispatch(getAboutUs());
    dispatch(AllShape());
    dispatch(getHomeShopAndWatch());
    dispatch(getAllProducts({}));
    dispatch(getGroupByProduct({}));
    dispatch(getCoupons({}));
    dispatch(getTopSellingProduct({}));
  }, [dispatch]);

  return (
    <>
      <section className="Home">
        <Banner banner={banner} />
        <div className="container custom-container-div">
          <div className="desktop_view">
            <div className="row me-0 ms-0 ">
              <div className="body_container">
                <Explore_By_Category />
                <Offers_Slider data={coupons} />
                <Popular_Product />
                {categoryWiseProduct?.data?.map((val, index) => (
                  <div className="grocery_div" key={index}>
                    <Common_Product_Swiper
                      data={val}
                      theme_colour={index % 2 === 0 ? "white" : "gray"}
                      headingText={val?.name}
                    />
                  </div>
                ))}
                <Offer_Products topsellingproducts={topsellingproducts} />
                <ComingSoon comingbanner={comingbanner} />
                <Service_Features />
                <New_In_Store data={newInStore?.data} />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Homepage;
