"use client";
import React, { useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import { pdpGalleryImage } from "../types";
import { AWS_CDN_URL } from "@/utils/staticValues";
import FullScreenGallery from "./FullScreenGallery";

export default function ProductGallery({
  gallery_image,
}: {
  gallery_image: any[];
}) {
  const [isFullScreen, setIsFullScreen] = useState(false);
  const [startIndex, setStartIndex] = useState(0);
  const minSlidesForLoop = 3;
  const enableLoop = gallery_image && gallery_image.length >= minSlidesForLoop;

  const handleImageClick = (index: number) => {
    setStartIndex(index);
    setIsFullScreen(true);
  };

  return (
    <>
      <Swiper
        loop={enableLoop}
        spaceBetween={2}
        slidesPerView={1.125}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        modules={[Autoplay, Pagination, Navigation]}
        className="product-img-swiper"
        id="product_img_swipter"
        breakpoints={{
          640: {
            slidesPerView: 2,
          },
          768: {
            slidesPerView: 2.4,
          },
        }}
      >
        {gallery_image &&
          gallery_image.map(
            (
              item: {
                image_url: string;
                id: React.Key | null | undefined;
                alt_text: string;
                file_type: "image" | "video";
              },
              index: number,
            ) => {
              const altText = item.alt_text?.trim() || "";
              const src = `${AWS_CDN_URL}/${item.image_url}`;

              return (
                <SwiperSlide key={item.id ?? index}>
                  <div
                    onClick={() => handleImageClick(index)}
                    className="cursor-pointer"
                  >
                    {item.file_type === "video" ? (
                      <video
                        src={src}
                        controls
                        playsInline
                        disablePictureInPicture
                        controlsList="nodownload nofullscreen noremoteplayback"
                        className="swiper-video h-auto w-full"
                      />
                    ) : (
                      <Image
                        src={src}
                        height={600}
                        width={1000}
                        alt={altText}
                        className="img-responsive"
                      />
                    )}
                  </div>
                </SwiperSlide>
              );
            },
          )}
      </Swiper>
      {isFullScreen && (
        <FullScreenGallery
          images={gallery_image}
          startIndex={startIndex}
          onClose={() => setIsFullScreen(false)}
        />
      )}
    </>
  );
}