"use client";
import React, { useLayoutEffect, useRef, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
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 { Navigation, Thumbs, Controller, Autoplay } from "swiper/modules";
import { services } from "@/interfaces/types";
import ImageWithFallback from "@/shared/ImageWithFallback";
import VideoWithFallback from "@/shared/VideoWithFallback";

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;
  }
}

type Props = {
  services: services[];
};

export default function OurServicesSwiper({ services }: Props) {
  const t = useTranslations("Home");

  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 (
    <div className="mt-8 containerr  lg:px-16 px-4" data-aos="zoom-in">
      <Swiper
        // controller={{ control: firstSwiper }}
        loop={true}
        spaceBetween={15}
        slidesPerView={4}
        // watchSlidesProgress
        // onSwiper={setThumbsSwiper}
        // slideToClickedSlide={true}
        breakpoints={{
          300: {
            slidesPerView: 1,
            spaceBetween: 15,
          },
          630: {
            slidesPerView: 2,
            spaceBetween: 15,
          },
          800: {
            slidesPerView: 3,
            spaceBetween: 15,
          },
          1060: {
            slidesPerView: 4,
            spaceBetween: 15,
          },
          1350: {
            slidesPerView: 4,
            spaceBetween: 15,
          },
        }}
        // freeMode={true}
        modules={[Autoplay]}
        className="mySwiper"
      >
        {services.map((ele, index: React.Key) => {
          return (
            <SwiperSlide
              key={index}
              className="lg:h-[400px] h-96 rounded-lg overflow-hidden relative"
            >
              {ele.media?.includes("images") ? (
                <ImageWithFallback
                  key={ele.id}
                  width={400}
                  height={700}
                  className="w-80 lg:h-[400px] h-96 object-cover brightness-[0.7] transform-transition	hover:scale-[1.2]"
                  src={ele.media}
                  alt="Project image"
                />
              ) : (
                <VideoWithFallback
                  width={400}
                  height={700}
                  className="w-80 lg:h-[400px] h-96 object-cover brightness-[0.7] transform-transition	hover:scale-[1.2]"
                  src={ele.media}
                  loop
                  autoPlay
                  muted
                />
              )}
              <p className=" font-medium text-xl leading-8 text-start absolute bottom-3 start-2 text-white">
                {ele.title}
              </p>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
}