import React, { useEffect, useState } from "react";
import "./All_Products_Category_Slider.css";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper/modules";
import { useDispatch, useSelector } from "react-redux";
import {
  getAllCategories,
  getAllSubCategory,
} from "../../../features/master/masterSlice";
import Cookies from "js-cookie";
const All_Products_Category_Slider = ({ categories, ...props }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [index, setIndex] = useState(false);

  const resto_category_slider = [
    {
      image: "/assets/images/products/vegetables/img1.png",
      name: "All",
    },
    {
      image: "/assets/images/products/vegetables/img2.png",
      name: "Potatos",
    },
  ];

  return (
    <>
      <section className="All_Vegitables_category">
        <div className="container">
          <div className="slidersec">
            <Swiper
              modules={[Navigation]}
               spaceBetween={5}
              // navigation={true}
              loop={true}
              breakpoints={{
                0: {
                  slidesPerView: 2,
                  spaceBetween: 10
                },
                350: {
                  slidesPerView: 3,
                  spaceBetween: 10
                },
                575: {
                  slidesPerView: 4,
                  spaceBetween: 10
                },
                768: {
                  slidesPerView: 5,
                  spaceBetween: 10
                },
                992: {
                  slidesPerView: 8,
                  spaceBetween: 10
                },
                1200: {
                  slidesPerView: 8,
                  spaceBetween: 10
                },
              }}
              className="mySwiper All_Vegitables_category_slider category_slider "
            >
              {props?.categoryImage && (
                <SwiperSlide
                  key={"all"}
                  onClick={() => {
                    // setActiveIndex(0);
                    props?.setSubCategoryId(null);
                  }}
                >
                  <div
                    className={`sliderdiv ${props.subCategoryId === null ? "active" : ""
                      }`}
                  >
                    <div
                      className={`imagediv ${props.subCategoryId === null ? "active" : ""
                        }`}
                    >
                      <img
                        className="slider-img"
                        src={
                          process.env.NEXT_PUBLIC_IMG_URL + props?.categoryImage
                        }
                        // src={
                        //   process.env.PUBLIC_URL + resto_category_slider[0]?.image
                        // }
                        alt={resto_category_slider[0]?.name}
                      />
                    </div>
                    <p className="catname">
                      {resto_category_slider[0]?.name || props.subcategoryname}
                    </p>
                  </div>
                </SwiperSlide>
              )}

              {categories?.map((data, idx) => {
                return (
                  <SwiperSlide
                    key={data?.id}
                    onClick={() => {
                      // setActiveIndex(data?.id);
                      props?.setSubCategoryId(data?.id);
                    }}
                  >
                    <div
                      className={`sliderdiv ${Number(props.subCategoryId) === Number(data?.id)
                          ? "active"
                          : ""
                        }`}
                    >
                      <div
                        className={`imagediv ${Number(props.subCategoryId) === data?.id
                            ? "active"
                            : ""
                          }`}
                      >
                        <img
                          className="slider-img"
                          src={process.env.NEXT_PUBLIC_IMG_URL + data?.image}
                          alt={data?.name}
                        />
                      </div>
                      <p className="catname">{data?.name}</p>
                    </div>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
        </div>
      </section>
    </>
  );
};

export default All_Products_Category_Slider;
