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 "./slider.module.css";

import { Navigation, Pagination, Autoplay } 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";

export default function MainSlider() {
  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} />
      ) : (
        slider.length > 0 && (
          <Swiper
            pagination={{
              clickable: true,
            }}
            modules={[Navigation, Pagination, Autoplay]}
            spaceBetween={30}
            centeredSlides={true}
            autoplay={{ delay: 7000, disableOnInteraction: true }}
            speed={800}
            loop={true}
            className={style.mySwiper}
          >
            {slider &&
              slider.length > 0 &&
              slider.map((item, index) => (
                <SwiperSlide className={style["swiper-slide"]} key={index}>
                  <div
                    className={`${style.slider_main_section} ${
                      index / 2 != 0 && style.row_reverse
                    }`}
                  >
                    <Image
                      src={
                        process.env.NEXT_PUBLIC_UPLOADS +
                        "/sliders/" +
                        item.image
                      }
                      alt="slider"
                      className={style.image}
                      fill
                    />
                    <div className={style.text_section}>
                      <div className={style.description_section}>
                        {item.subtitle}
                      </div>
                      <div className={style.btn_section}>
                        <button
                          onClick={() => {
                            if (item.button_path) {
                              if (item.button_path.includes("http")) {
                                window.open(item.button_path, "_blank");
                              } else {
                                router.push(item.button_path);
                              }
                            }
                          }}
                          className="primary_btn_no_animation"
                        >
                          {item.button_text}
                        </button>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
          </Swiper>
        )
      )}
    </>
  );
}
