"use client";

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

// Import Swiper styles
import "swiper/css/navigation";
import "swiper/css/thumbs";
// import required modules
import { Navigation, Thumbs } from "swiper/modules";
import Image from "next/image";
// import NavigationButton from "@/modules/ui/navigation-button";
import { useState } from "react";
import { Swiper as SwiperClass } from "swiper/types";

interface SliderComponentProps {
  media: { image: string, }[];
}
export default function Page({ media }: SliderComponentProps) {
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass | null>(null);

  const checkMediaType = (url: string) => {
    const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];
    const videoExtensions = [".mp4", ".webm", ".ogg", ".mov"];

    const extension = url.slice(url.lastIndexOf(".")).toLowerCase();

    if (imageExtensions.includes(extension)) {
      return "image";
    } else if (videoExtensions.includes(extension)) {
      return "video";
    }
    return "unknown";
  };

  if (!media || media?.length == 0) {
    return null;
  }
  return (
    <>
      <div className="relative rounded-[12px] overflow-hidden bg-[#F8F8F8]">
        <Swiper
          // ref={swiperRef}
          pagination={{
            clickable: false
          }}
          modules={[Navigation, Thumbs]}
          slidesPerView={1}
          className="image-gallery"
          navigation={{
            nextEl: ".image-gallery-button-next",
            prevEl: ".image-gallery-button-prev",
            disabledClass: "swiper-button-disabled"
          }}
          thumbs={{ swiper: thumbsSwiper && thumbsSwiper }}
        >
          {media.map((item, index: number) => {
            return (
              <SwiperSlide key={index}>
                {checkMediaType(item.image) === "image" ? (
                  <div className="aspect-[16/9] relative">
                    <Image
                      src={item.image}
                      alt={"altText"}
                      width={800}
                      height={800}
                      priority
                      unoptimized
                      loading={"eager"}
                      className="w-full h-auto object-cover"
                    />
                  </div>
                ) : (
                  <video
                    width={"100%"}
                    height={800}
                    autoPlay
                    muted
                    loop
                    playsInline
                    className="!h-[300px] lg:!h-[800px]"
                  >
                    <source src={item.image} type="video/mp4" />
                    Your browser does not support the video tag.
                  </video>
                )}
              </SwiperSlide>
            );
          })}
        </Swiper>
        {/* <NavigationButton
          className="absolute z-10 top-[50%] image-gallery-button-prev left-[10px]"
          onClick={() => console.log("")}
        />
        <NavigationButton
          className="rotate-180 absolute z-10 top-[50%]  image-gallery-button-next right-[10px]"
          onClick={() => console.log("")}
        /> */}
      </div>
      <div className="relative py-[20px]">
        <Swiper
          onSwiper={setThumbsSwiper}
          spaceBetween={12}
          slidesPerView={4}
          modules={[Navigation, Thumbs]}
          className="image-gallery-thumbs"
          navigation={{
            nextEl: ".image-gallery-thumbs-button-next",
            prevEl: ".image-gallery-thumbs-button-prev",
            disabledClass: "swiper-button-disabled"
          }}
          breakpoints={{
            0: {
              slidesPerView: 2.8
            },
            500: {
              slidesPerView: 3.5
            },
            640: {
              slidesPerView: 4 // 1 slide at a time for mobile
            },
            768: {
              slidesPerView: 4 // 2 slides at a time for tablets
            },
            1024: {
              slidesPerView: 4
            }
          }}
        >
          {media.map((item, index: number) => {
            return (
              <SwiperSlide key={index}>
                <div className="cursor-pointer rounded-[12px] overflow-hidden bg-[#F8F8F8]">
                  {checkMediaType(item.image) === "image" ? (
                    <Image
                      src={item.image}
                      alt={"altText"}
                      width={120}
                      height={120}
                      className="w-full h-auto lg:h-[120px] object-cover"
                      unoptimized
                      loading={"lazy"}
                    />
                  ) : (
                    <video
                      width={"auto"}
                      height={120}
                      className="!h-[80px] lg:!h-[120px]"
                    >
                      <source src={item.image} type="video/mp4" />
                      Your browser does not support the video tag.
                    </video>
                  )}
                </div>
              </SwiperSlide>
            );
          })}
        </Swiper>
        {/* <NavigationButton
          className="absolute z-10 top-[40%] image-gallery-thumbs-button-prev left-[10px]"
          onClick={() => console.log("")}
        />
        <NavigationButton
          className="rotate-180 absolute z-10 top-[40%] image-gallery-thumbs-button-next right-[10px]"
          onClick={() => console.log("")}
        /> */}
      </div>
    </>
  );
}