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) => {
        console.log("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;