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

import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import "swiper/css/navigation";

import style from "./topGallery.module.css";

import { Navigation, Pagination, Autoplay, Grid } from "swiper";
import { useRouter } from "next/router";
import NextImage from "@/other/NextImage";
import Image from "next/image";

import { customerApi } from "../../api/api";
import { useState } from "react";
import { useEffect } from "react";
import Loader from "@/components/utils/loader";
import FadeInContainer from "@/components/utils/animation/fadeInContainer";

export default function TopGallery({ siteText, singleCount }) {
  const router = useRouter();

  const [loader, setLoader] = useState(true);
  const [slider, setSlider] = useState([]);
  const getSlider = async () => {
    setLoader(true);
    await customerApi
      .get("/site/slider")
      .then((res) => {
        if (res.data.success === true) {
          if (res.data.data && res.data.data.length > 0) {
            setSlider(res.data.data);
          }
        }
        setLoader(false);
      })
      .catch((err) => {
        setLoader(false);
        console.log("Err", err);
      });
  };
  useEffect(() => {
    getSlider();
  }, []);
  return (
    <>
      {loader ? (
        <Loader className={style.loader} />
      ) : (
        siteText &&
        siteText.image &&
        siteText.image.length > 0 && (
          <>
            <Swiper
              pagination={{
                clickable: true,
              }}
              grid={{
                fill: "row",
              }}
              breakpoints={{
                1199: {
                  slidesPerView: singleCount ? Number(singleCount) : 5,
                  grid: { rows: 1 },
                },
                991: {
                  slidesPerView: 4,
                  grid: { rows: 1 },
                },
                768: {
                  slidesPerView: 2,
                  grid: { rows: 1 },
                },
                350: { slidesPerView: 1, grid: { rows: 1 } },
                0: { slidesPerView: 1, grid: { rows: 1 } },
              }}
              modules={[Grid, Navigation, Autoplay]}
              autoplay={{ delay: 5000, disableOnInteraction: false }}
              speed={800}
              loop={true}
              className={style.mySwiper}
            >
              {siteText &&
                siteText.image.length > 0 &&
                siteText.image.map((item, index) => (
                  <SwiperSlide
                    className={style["swiper-slide"]}
                    key={index}
                    style={{
                      backgroundImage: `url(${
                        process.env.NEXT_PUBLIC_UPLOADS +
                        "/" +
                        siteText._id +
                        "/" +
                        item
                      })`,
                    }}
                  ></SwiperSlide>
                ))}
              <div className={style.flex_centre}>
                {/* <Image
                      src={
                        process.env.NEXT_PUBLIC_UPLOADS +
                        "/sliders/" +
                        item.image
                      }
                      alt="slider"
                      className={style.image}
                      fill
                      onClick={() =>
                        item.button_path && router.push(item.button_path)
                      }
                    /> */}
              </div>
            </Swiper>
            {siteText.content[0] && (
              <div className={style.text_section}>
                <FadeInContainer loadVisibile={true} delay={800}>
                  <div className={style.section}>
                    <h1 className={style.slider_title}>
                      {siteText.content[0].includes("title[") &&
                        siteText.content[0].split("title[")[1].split("]")[0]}
                    </h1>
                    <div
                      className={`primary_btn_no_animation ${style.slider_btn}`}
                      onClick={() =>
                        router.push(
                          siteText.content[0].includes("button_path[") &&
                            siteText.content[0]
                              .split("button_path[")[1]
                              .split("]")[0]
                        )
                      }
                    >
                      {siteText.content[0].includes("button_text[") &&
                        siteText.content[0]
                          .split("button_text[")[1]
                          .split("]")[0]}
                    </div>
                  </div>
                </FadeInContainer>
              </div>
            )}
          </>
        )
      )}
    </>
  );
}
