import React, { useEffect, useState } from "react";
import "./Category_section.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Nav } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { useLocation } from "react-router-dom";
import { useNavigate } from "react-router-dom";

import {
  getAllCategories,
  getAllSubCategory,
} from "../../../features/master/masterSlice";

import Category_Subcategory_Card from "../../common-components/category_subcategory_card/Category_Subcategory_Card";

const Category_section = () => {
  const [swiperInstance, setSwiperInstance] = useState(null);
  const [status, setStatus] = useState("");
  const [selectedCategoryId, setSelectedCategoryId] = useState("");

  const dispatch = useDispatch();
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);
  const categoryId = queryParams.get("category_id");

  // Redux state
  const category = useSelector((state) => state?.master?.categories);

  const navigate = useNavigate();

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

  const handleCategoryClick = (category_id) => {
    setStatus("");
    setSelectedCategoryId(category_id);
    dispatch(getAllSubCategory({ category_id }));
  };

  return (
    <section className="Category_section">
      <div className="container">
        <div className="heading_holder">
          <h4 className="heading_text">Explore Collection</h4>
        </div>

        <div className="cat_subcat_div">
          {status === "noCategory" ? (
            <p className="text-danger">No category available.</p>
          ) : (
            <div className="flex-row row p-0 mb-3">
              {category?.map((slide, index) => (
                <div className="col-xl-2 col-lg-2 col-md-4 col-sm-4 col-6 mb-1 p-1">
                  <div key={index} className="product-slide">
                    <Nav.Item>
                      <Nav.Link
                        eventKey={slide?.id}
                        active={selectedCategoryId === slide?.id}
                        onClick={() =>
                          navigate("/categories", {
                            state: { category_id: slide?.id },
                          })
                        }
                      >
                        <Category_Subcategory_Card
                          className="product-image"
                          content={slide?.name}
                          image={process.env.NEXT_PUBLIC_IMG_URL + slide?.image}
                          imgClassName="category-image"
                        />
                        <div className="triangle-right"></div>
                      </Nav.Link>
                    </Nav.Item>
                  </div>
                </div>
              ))}

              {/* <Swiper
                                className="mySwiper"
                                onSwiper={(swiper) => setSwiperInstance(swiper)}
                                pagination={{
                                    dynamicBullets: true,
                                    clickable: true,
                                }}
                                loop={true}
                                modules={[Pagination, Navigation]}
                                breakpoints={{
                                    0: { slidesPerView: 2, spaceBetween: 10 },
                                    350: { slidesPerView: 3, spaceBetween: 10 },
                                    486: { slidesPerView: 3, spaceBetween: 10 },
                                    576: { slidesPerView: 4, spaceBetween: 10 },
                                    768: { slidesPerView: 5, spaceBetween: 10 },
                                    992: { slidesPerView: 6, spaceBetween: 10 },
                                    1200: { slidesPerView: 6, spaceBetween: 10 },
                                }}

                            >
                                {category?.map((slide, index) => (
                                    <SwiperSlide key={index} className="product-slide">

                                        <Nav.Item>
                                            <Nav.Link
                                                eventKey={slide?.id}
                                                active={selectedCategoryId === slide?.id}
                                                onClick={() => navigate("/categories", { state: { category_id: slide?.id } })}
                                            >
                                                <Category_Subcategory_Card
                                                    className="product-image"
                                                    content={slide?.name}
                                                    image={
                                                        process.env.NEXT_PUBLIC_IMG_URL + slide?.image
                                                    }
                                                    imgClassName="category-image"
                                                />
                                                <div className="triangle-right"></div>
                                            </Nav.Link>
                                        </Nav.Item>
                                    </SwiperSlide>
                                ))}
                            </Swiper> */}
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

export default Category_section;
