"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,
} 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"

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-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="col-xxl-10 col-xl-9 col-lg-9 custom_right_col">
                <div className="body_container">
                  <Banner banner={banner} />
                  <Explore_By_Category />

                  <Offers_Slider data={coupons} />

                  {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>
                  ))}

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

export default Homepage;
