"use client";
/* 
  This is the property image box component.
  It contains the following components:
  - PropertyImageBox
*/
import Routes from "@/src/utils/RouteConstants";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import 'swiper/css';
import 'swiper/css/navigation';
import { Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import NoImages from "../../../public/images/no-listing.png";
import CustomLightbox from "../CustomLightbox";

// Define the props type for the PropertyImageBox component
interface PropertyImageBoxProps {
  extraClass?: string;
  slug: string;
  propertyImage: any[];
  // add other props here if needed
}

const PropertyImageBox: React.FC<PropertyImageBoxProps> = ({ extraClass = "", slug, propertyImage = [] }) => {

  const [currentSlide, setCurrentSlide] = useState(1);
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [startIndex, setStartIndex] = useState(-1);

  /**
   * 
   * @param index index of clicked image
   * @param e elements
   */
  const handleImageClick = (index: number, e: React.MouseEvent) => {
    e.stopPropagation();
    setStartIndex(index);       // track which image in the slider
    setLightboxOpen(true);
  };

  // Handler to close the lightbox
  const handleCloseLightbox = (e?: React.MouseEvent) => {
    if (e) e.stopPropagation();
    setLightboxOpen(false);
    setStartIndex(-1);
  };

  return (
    <>
      <div className={`propertyImageBox w-full hidden md:grid grid-cols-2 lg:grid-cols-4 grid-rows-2 gap-3 patternWithbg ${extraClass}`}>
        <Link href={Routes.FIND_A_HOME_IMAGES(slug)} className={`roundedArrowBtn`}>
          <i className={`Icon IconRightArrow`}></i>
        </Link>
        {propertyImage?.length === 0 ?
          <div className={`singleImageBox aspect-4/3 bg-whiteFBColor rounded-[12px] md:rounded-[20px] overflow-hidden col-span-2 row-span-2`}>
            <Image src={NoImages} width={500} height={500} alt="property-image" className="!w-full !h-full object-cover object-center" />
          </div>
          :
          propertyImage?.slice(0, 5)?.map((item: any, index: number) => {
            return (
              <React.Fragment key={index}>
                {
                  index === 0 ?
                    <div className={`singleImageBox aspect-4/3 bg-whiteFBColor rounded-[12px] md:rounded-[20px] overflow-hidden col-span-2 row-span-2`}>
                      {item?.imageUrl && <Image onClick={(e) => handleImageClick(index, e)} src={item?.imageUrl} width={500} height={500} alt="property-image" className="!w-full !h-full object-cover object-center" />}
                    </div>
                    :
                    <div className={`singleImageBox aspect-4/3 bg-whiteFBColor rounded-[12px] md:rounded-[20px] overflow-hidden`}>
                      {item?.imageUrl && <Image onClick={(e) => handleImageClick(index, e)} src={item?.imageUrl} width={500} height={500} alt="property-image" className="!w-full !h-full object-cover object-center" />}
                    </div>
                }
              </React.Fragment>
            )
          })
        }
      </div>

      {propertyImage?.length > 0 && <div className="flex md:hidden w-full relative">
        {/* <Link href={Routes.FIND_A_HOME_IMAGES(slug)} className={`roundedArrowBtn !w-[35px] !h-[35px] z-2`}>
          <i className={`Icon IconRightArrow !w-[18px] !h-[18px]`}></i>
        </Link> */}
        <Swiper
          modules={[Navigation]}
          // modules={[Autoplay]}
          loop={false}
          spaceBetween={20}
          slidesPerView={1}
          // autoplay={{ delay: 2000, disableOnInteraction: false }}
          onSlideChange={(swiper) => setCurrentSlide(swiper.realIndex + 1)}
          onInit={(swiper) => setCurrentSlide(swiper.realIndex + 1)}
          className="w-full relative rounded-[16px] overflow-hidden"
          navigation={{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }}
        >
          {propertyImage?.map((item, index) => (
            <SwiperSlide key={index} className="rounded-[16px] overflow-hidden">
              <Link className="flex w-full h-full" href={Routes.FIND_A_HOME_IMAGES(slug)}><Image src={item?.imageUrl} width={350} height={250} alt={`Slide ${index + 1}`} className="w-full h-auto object-cover" /></Link>
            </SwiperSlide>
          ))}
          <button onClick={(e) => e.stopPropagation()} className="swiper-button-prev absolute !top-1/2 !left-4 z-10 hover:bg-secondaryColor hover:border-transparent !m-0 ease-in duration-75 transform -translate-y-1/2 bg-primaryColor !h-[35px] md:!h-[40px] !w-[35px] md:!w-[40px] p-2 rounded-full after:hidden">
            <i className={`Icon IconBackArrow !w-5 !h-5 !bg-white`}></i>
          </button>
          <button onClick={(e) => e.stopPropagation()} className="swiper-button-next absolute !top-1/2 !right-4 z-10 hover:bg-secondaryColor hover:border-transparent !m-0 ease-in duration-75 transform -translate-y-1/2 bg-primaryColor !h-[35px] md:!h-[40px] !w-[35px] md:!w-[40px] p-2 rounded-full after:hidden">
            <i className={`Icon IconFowrardArrow !w-5 !h-5 !bg-white`}></i>
          </button>
        </Swiper>
        {/* Custom Counter */}
        <div className="absolute bottom-2 right-4 rounded-[50px] bg-[#000000a8] fs-14 text-white font-weight-fw600 min-w-[45px] p-1 text-center z-1">
          {currentSlide} / {propertyImage.length}
        </div>
      </div>}

      {/* Lightbox Component */}
      {lightboxOpen && startIndex > -1 && <CustomLightbox
        images={propertyImage?.map((img: { imageUrl: any }) => img?.imageUrl)}
        startIndex={startIndex}
        isOpen={lightboxOpen}
        onClose={handleCloseLightbox}
      />}
    </>
  );

};

export default PropertyImageBox;