"use client";
/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
import React, { useLayoutEffect, useRef, useState } from "react";
import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

// import required modules
import { FreeMode, Navigation, Thumbs, Controller } from "swiper/modules";

import { useLocale } from "next-intl";
import Image from "next/image";
import Fancybox from "../ui/Fancybox";

interface CarouselSwiperProps {
  productImages: string[];
  mainImage: string[];
  selectColor: any;
}
declare module "react" {
  interface CSSProperties {
    "--swiper-navigation-color"?: string;
    "--swiper-pagination-color"?: string;
    "--swiper-pagination-bullet-inactive-color"?: string;
    "--swiper-pagination-bullet-inactive-opacity"?: string;
    "--swiper-pagination-bullet-width"?: string;
    "--swiper-pagination-progressbar-size"?: string;
  }
}

const CarouselSwiper = ({
  productImages,
  mainImage,
  selectColor,
}: CarouselSwiperProps) => {
  const [thumbsSwiper, setThumbsSwiper] = useState<any>();
  const [firstSwiper, setFirstSwiper] = useState<SwiperClass>();
  const [secondSwiper, setSecondSwiper] = useState<SwiperClass>();
  const swiper1Ref = useRef<React.MutableRefObject<null>>(null);
  const swiper2Ref = useRef();
  const locale = useLocale();

  useLayoutEffect(() => {
    if (swiper1Ref.current !== null) {
      //@ts-ignore
      swiper1Ref.current.controller.control = swiper2Ref.current;
    }
  }, []);

  return (
    <>
      <Fancybox
        options={{
          Carousel: {
            infinite: true,
          },
        }}
      >
        <Swiper
          onSwiper={(swiper) => {
            if (swiper1Ref.current !== null) {
              //@ts-ignore
              swiper1Ref.current = swiper;
            }
          }}
          style={{
            "--swiper-navigation-color": "#fff",
            "--swiper-pagination-color": "#fff",
          }}
          spaceBetween={10}
          controller={{ control: secondSwiper }}
          navigation={true}
          thumbs={{
            swiper:
              thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
          }}
          modules={[FreeMode, Navigation, Thumbs, Controller]}
          className="mySwiper2"
        >
          {productImages?.map((image: any, index: React.Key) => (
            <SwiperSlide key={index}>
              <img
                data-fancybox="gallery"
                className="cursor-pointer w-full h-[300px] md:!h-[500px] md:!w-full  max-h-[500px]"
                loading="eager"
                // @ts-ignore
                src={image}
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </Fancybox>

      <div className="mt-0">
        <Swiper
          controller={{ control: firstSwiper }}
          loop={true}
          spaceBetween={10}
          slidesPerView={1}
          watchSlidesProgress
          touchRatio={0.2}
          onSwiper={setThumbsSwiper}
          slideToClickedSlide={true}
          breakpoints={{
            300: {
              slidesPerView: 2,
              spaceBetween: 20,
            },
            630: {
              slidesPerView: 3,
              spaceBetween: 20,
            },
            800: {
              slidesPerView: 4,
              spaceBetween: 30,
            },
            1060: {
              slidesPerView: 5,
              spaceBetween: 30,
            },
            1350: {
              slidesPerView: 7,
              spaceBetween: 30,
            },
          }}
          freeMode={true}
          modules={[Navigation, Thumbs, Controller]}
          className="mySwiper"
        >
          {productImages?.map((image: any, index: React.Key) => (
            <SwiperSlide key={index} className="min-h-[150px]">
              <Image
                alt="image"
                fill
                className="w-full h-full min-h-[150px]"
                //@ts-ignore
                src={image}
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </>
  );
};

export default CarouselSwiper;