/* The AllPhotosSection component displays a grid of property images. */
"use client"
import CustomLightbox from "@/src/components/CustomLightbox";
import Image from "next/image";
import React, { useState } from "react";
import { default as PhotosImage, default as PhotosImage1 } from "../../../../../public/images/all-photos1.webp";
import styles from "./AllPhotos.module.scss";

// Define the props for the AllPhotosSection component
interface AllPhotosSectionProps {
  propertyImages: any;
}

const AllPhotosSection: React.FC<AllPhotosSectionProps> = ({ propertyImages }) => {
  // array of images to be pass as data
  const AllPhotosArray = [
    { image: PhotosImage },
    { image: PhotosImage1 },
    { image: PhotosImage },
    { image: PhotosImage1 },
    { image: PhotosImage },
    { image: PhotosImage },
    { image: PhotosImage1 },
    { image: PhotosImage },
    { image: PhotosImage1 },
    { image: PhotosImage1 },
    { image: PhotosImage },
    { image: PhotosImage1 },
  ];

  // State to control the lightbox
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [startIndex, setStartIndex] = useState(0);

  // Handler for image click
  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);
  };

  return (
    // main wrapper of photos section
    <div className={`w-full ${styles.allPhotosMainWrapper}`}>
      {/* title wrapper */}
      <h2>All Photos</h2>

      {/* photos grid */}
      <div className={`grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 ${styles.photosGridBox}`}>
        {propertyImages?.map((item: any, i: number) => (
          <div
            key={i}
            className={`w-full rounded-xl overflow-hidden cursor-pointer aspect-4/3  bg-whiteFBColor ${styles.singleImageBox} ${i === 0 ? 'md:col-span-2 md:row-span-2' : ''}`}
          >
            <Image
              src={item?.imageUrl}
              onClick={(e) => handleImageClick(i, e)}
              alt="property-image"
              width={1000}
              height={500}
              className="!w-full !h-full object-cover object-center"
            />
          </div>
        ))}
      </div>
      {/* Lightbox Component */}
      <CustomLightbox
        images={propertyImages?.map((img: { imageUrl: any }) => img?.imageUrl)}
        startIndex={startIndex}
        isOpen={lightboxOpen}
        onClose={handleCloseLightbox}
      />
    </div>
  );

};

export default AllPhotosSection;