import React, { useEffect, useState } from "react";
import { customerApi } from "@/api/api";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import { Grid, Navigation } from "swiper";
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";

import style from "./categorySelection.module.css";
import {
  ArrowBackIos,
  ArrowForwardIos,
  BrokenImage,
} from "@mui/icons-material";
import Loader from "@/components/utils/loader";
import NextImage from "@/other/NextImage";
import { useRouter } from "next/router";
const CategorySelection = (props) => {
  const [loader, setLoader] = useState(true);
  const router = useRouter();

  const ForwardBtn = () => {
    return (
      <ArrowForwardIos className={`swiper-button-next ${style.btn_next}`} />
    );
  };
  const BackBtn = () => {
    return <ArrowBackIos className={`swiper-button-prev ${style.btn_prev}`} />;
  };
  const [categoryCard, setCategoryCard] = useState([]);

  const onCategoryload = async () => {
    const params = JSON.stringify({ name: "Category" });
    setLoader(true);
    await customerApi
      .get("/categories?page=1&limit=0&params=&setName=category_main")
      .then((res) => {
        let result = [];
        if (res.data.result && res.data.result) result = res.data.result;
        setCategoryCard(result);
        setLoader(false);
      })
      .catch((err) => {
        setLoader(false);
        console.log(err);
      });
  };

  useEffect(() => {
    onCategoryload();
  }, []);

  return (
    <React.Fragment>
      <div className={style.category_selection}>
        <div className={style.category_head}>
          {props.heading && (
            <div className="primary-heading">{props.heading}</div>
          )}
          <div className={style.arrow_nav}>
            {categoryCard.length >= props.column * props.row && (
              <>
                <BackBtn />
                <ForwardBtn />
              </>
            )}
          </div>
        </div>
        {loader ? (
          <Loader className={style.loader} />
        ) : (
          <Swiper
            grid={{
              fill: "row",
            }}
            breakpoints={{
              768: {
                slidesPerView: props.column ? props.column : 4,
                grid: { rows: props.row ? props.row : 4 },
              },
              0: { slidesPerView: 1, grid: { rows: 1 } },
            }}
            spaceBetween={10}
            modules={[Grid, Navigation]}
            className={style.mySwiper}
            navigation={{
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            }}
          >
            {categoryCard.map((item, index) => (
              <SwiperSlide
                className={style["swiper_slide"]}
                key={index}
                onClick={() =>
                  router.push(`/store/category[${item._id}]_${item.name}`)
                }
              >
                <NextImage
                  src={item.image}
                  alt={item.name}
                  altImage={<BrokenImage />}
                  fill
                />
                <p className={style.category_title}>{item.name}</p>
              </SwiperSlide>
            ))}
          </Swiper>
        )}
        {categoryCard.length == 0 && !loader && (
          <p className="exist_error">No Category Available</p>
        )}
      </div>
    </React.Fragment>
  );
};

export default CategorySelection;
