import Image from "next/image";
import React, { useEffect, useState } from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Button } from "react-bootstrap";

import { Swiper, SwiperSlide } from "swiper/react";

import { Navigation, Autoplay } from "swiper/modules";
import { motion } from "framer-motion";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js";
import { Loader } from "react-bootstrap-typeahead";
import { useDispatch, useSelector } from "react-redux";
import { getSubCategoriesByCategoryId } from "../../redux/actions/categoriesAction.js";
import { setActivityFilters } from "../../redux/actions/activityAction.js";
import SubCategoryChips from "./SubCategoryChips.js";
const LetDiscover = ({ categories }) => {
  const { subCategories, loading } = useSelector(sate => sate.subCategories);
  const { activityFilters } = useSelector(sate => sate.activityFilters);
  const router = useRouter();
  const dispatch = useDispatch();
  const [activeIndex, setActiveIndex] = useState(null);
  // const [loading, setloading] = useState(null);
  console.log("categories", categories);
  console.log("subCategories", subCategories);
  console.log("activityFilters", activityFilters);
  const handleTitleClick = ({ index, data }) => {
    // setloading(true);
    // Check if the clicked index is already active
    if (activeIndex === index) {
      return; // Do nothing if it's already active
    }
    // Toggle the active index if it's different from the clicked index
    setActiveIndex(index);
    // setloading(false);
  };

  // useEffect(() => {
  //   dispatch(getSubCategoriesByCategoryId(router.query.category));
  // }, [router]);
  useEffect(() => {
    console.log("router.query.category", router.query.category);
    if (router.query.category) {
      dispatch(setActivityFilters({ filters: { category: router.query.category, subCategories: [] } }));
      setActiveIndex(router.query.category);
      dispatch(getSubCategoriesByCategoryId(router.query.category));
    }
  }, []);
  const [showCloseIcon, setShowCloseIcon] = useState({});
  const handleToggleCloseIcon = index => {
    setShowCloseIcon(prevShowCloseIcon => ({
      ...prevShowCloseIcon,
      [index]: !prevShowCloseIcon[index]
    }));
  };
  console.log("showCloseIcon", showCloseIcon);
  return (
    <>
      <section className="let-discover-session let-discover-listing-session">
        <div className="container-fluid">
          <div className="row">
            <div className="col-12">
              {/* <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                your text or div will come here
              </motion.div> */}
              <div className="head-btn">
                <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                  <div className="head01">
                    <div className="title">Let’s </div>
                    <h2>Discover</h2>
                  </div>
                </motion.div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <div className="let-discover-carousal position-relative">
                <Swiper
                  slidesPerView={3}
                  autoplay={false}
                  // autoplay={{
                  //   delay: 9000,
                  //   disableOnInteraction: false
                  // }}
                  spaceBetween={10}
                  navigation={{ nextEl: ".letdiscover-arrow-left", prevEl: ".letdiscover-arrow-right" }}
                  breakpoints={{
                    640: {
                      slidesPerView: 3,
                      spaceBetween: 20
                    },
                    768: {
                      slidesPerView: 4,
                      spaceBetween: 20
                    },
                    1024: {
                      slidesPerView: 10,
                      spaceBetween: 20
                    }
                  }}
                  modules={[Navigation, Autoplay]}
                  className="mySwiper01 mySwiper02"
                >
                  <SwiperSlide>
                    <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                      <a
                        className={activeIndex == "All" ? "active" : ""}
                        onClick={() => {
                          dispatch(setActivityFilters({ filters: {} }));
                          handleTitleClick({ index: "All" });
                        }}
                      >
                        <span className="image-container">
                          <Image layout="fill" alt="" className="image img-fluid" src={"/images/discover/01.png"} />
                        </span>
                        <div className="title">{"All"}</div>
                      </a>
                    </motion.div>
                  </SwiperSlide>
                  {categories &&
                    categories.data.map((data, index) => {
                      const isActive = activeIndex === index;
                      return (
                        <>
                          <SwiperSlide>
                            <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
                              <a
                                className={isActive ? "active" : ""}
                                onClick={async () => {
                                  // router.push(`?category=${data.id}`);
                                  dispatch(setActivityFilters({ filters: { ...activityFilters, category: data.id, subCategories: [] } }));
                                  dispatch(getSubCategoriesByCategoryId(data.id));
                                  handleTitleClick({ index, data });
                                }}
                              >
                                <span className="image-container">
                                  <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
                                </span>
                                <div className="title">{data.attributes.name}</div>
                              </a>
                            </motion.div>
                          </SwiperSlide>
                        </>
                      );
                    })}
                </Swiper>
                <div className="swiper-nav">
                  <div className="navbutton d-flex justify-content-between ">
                    <button className="letdiscover-arrow-right arrow">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-left.svg" />
                      </span>
                    </button>
                    <button className="letdiscover-arrow-left arrow">
                      <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/arrow-right.svg" />
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12 text-center">
              {!loading ? (
                <div className="sub-categories">
                  {activityFilters.category &&
                    subCategories &&
                    subCategories.data.map((data, index) => (
                      <SubCategoryChips key={index} data={data} />
                      // <a key={index} onClick={() => handleToggleCloseIcon(index)}>
                      //   <span>{data.attributes.name}</span>
                      //   {showCloseIcon[index] && (
                      //     <span className="image-container">
                      //       <Image layout="fill" alt="image" className="image" src="/images/icons/close-button.svg" />
                      //     </span>
                      //   )}
                      // </a>
                    ))}
                </div>
              ) : (
                <Loader />
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default LetDiscover;