"use client";

import Image from "next/image";
import test1 from "../../assets/images/product/1.png";
import test2 from "../../assets/images/product/2.png";
import test3 from "../../assets/images/product/3.png";
import logo from "../../assets/images/logo.png";
import { useState } from "react";

const GalleryBox = ({ images }) => {


  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [isLightboxOpen, setIsLightboxOpen] = useState(false);

  const handleNext = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === file.length - 1 ? 0 : prevIndex + 1
    );
  };

  const handlePrev = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === 0 ? file.length - 1 : prevIndex - 1
    );
  };

  const handleImageClick = (index) => {
    setCurrentImageIndex(index);
    setIsLightboxOpen(true);
  };

  const closeLightbox = () => {
    setIsLightboxOpen(false);
  };

  return (
    <div className="w-full rounded-3xl">
      <div className="flex justify-center xs:pb-[10px]">
        <div className=" relative p-8">
          {images?.length > 0 ? (
            <Image
              src={images?.[0]?.url}
              width={500}
              height={500}
              className="mx-auto object-contain cursor-pointer"
              alt={images?.[0]?.alternativeText ?? ""}
              onClick={() => handleImageClick(0)}
              priority
              loading="eager"
            />
          ) : (
            <div className="xs:!w-[85px] lg:!w-[85px]">
              <Image
                src={logo}
                className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"

              />
            </div>
          )}
        </div>
      </div>

      <div className="flex p-3 overflow-x-auto" id="swich-scrollbar">
        {images.slice(1)?.map((image, index) => (
          <div
            className="p-3 ml-2 bg-white border shadow-sm rounded-3xl cursor-pointer"
            key={image.documentId}
            onClick={() => handleImageClick(index)}
          >
            <div className="xs:w-[50px] lg:w-[50px]">
              <Image
                src={image.url}
                alt={image.alternativeText}
                width={250}
                height={250}
                priority
                loading="eager"
              />
            </div>
          </div>
        ))}
      </div>

      {isLightboxOpen && (
        <>
          <div className="fixed inset-0  bg-black bg-opacity-75 z-50">
            <div className="bg-white bg-opacity-70 p-12 flex items-center justify-center w-3/4 relative h-3/4 inset-0 left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 rounded-xl">

              <Image
                src={images[currentImageIndex]?.url}
                fill
                className="mx-auto object-contain"
                alt={"llc"}
                priority
                loading="eager"
              />
              <button
                className="absolute left-5 p-2 bg-gray-100 rounded-full font-bold hover:bg-gray-200"
                onClick={handlePrev}
              >
                Prev
              </button>
              <button
                className="absolute right-5 p-2 bg-gray-100 rounded-full font-bold hover:bg-gray-200"
                onClick={handleNext}
              >
                Next
              </button>
              <button
                className="absolute top-5 right-5 p-2 bg-gray-100 rounded-full hover:bg-gray-200"
                onClick={closeLightbox}
              >
                Close
              </button>

            </div>
          </div>

        </>

      )}
    </div>
  );
};

export default GalleryBox;
