import React, { useState, useEffect } from "react";
import "./ImagePop.css";
import { useModal } from "./ModalContext";
import moment from "moment";
import {formatUTCToLocalTime} from "../../utils/dateUtils";

const ImagePop = ({ batch, initialIndex = 0 }) => {
  const { closeModal } = useModal();
  const [currentIndex, setCurrentIndex] = useState(initialIndex);

  // Effect to update currentIndex if the initialIndex prop changes
  useEffect(() => {
    setCurrentIndex(initialIndex);
  }, [initialIndex, batch]);

  // If no batch or documents are provided, don't render
  if (!batch || !batch.documents || batch.documents.length === 0) return null;

  // Get the current image document from the batch's documents array
  const image = batch.documents[currentIndex];

  // Fallback if for some reason the image at the current index doesn't exist
  if (!image) return null;

  // Format details for display from the individual image document
  const fullName = `${image.uploadedBy?.firstName || ""} ${
    image.uploadedBy?.lastName || ""
  }`.trim();
  const date = formatUTCToLocalTime(image.uploadedAt);
   
  // Location and category details from the 'batch' object (as previously corrected)
  const buildingName = batch.buildingName;
  const floorName = batch.floorName;
  const workAreaName = batch.workAreaName;
  const activityName = batch.activityName;  
  const batchComment = batch.comment;

  // Handler for navigating to the previous image
  const handlePrev = () => {
    setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
  };

  // Handler for navigating to the next image
  const handleNext = () => {
    setCurrentIndex((prevIndex) =>
      Math.min(batch.documents.length - 1, prevIndex + 1)
    );
  };

  // Determine if previous/next buttons should be enabled/visible
  const hasPrev = currentIndex > 0;
  const hasNext = currentIndex < batch.documents.length - 1;

  return (
    <div className="image-modal-overlay">
      <div className="image-modal-content">
        
        <i className='bx bx-x close-button' onClick={closeModal}></i>

        {hasPrev && (
          <button className="nav-button prev-button" onClick={handlePrev}>
            <i className='bx bx-chevron-left'></i>
          </button>
        )}

     <div className="image-container">
         <img src={image.url} alt="Preview" className="modal-image" />
     </div>

        {hasNext && (
          <button className="nav-button next-button" onClick={handleNext}>
            <i className='bx bx-chevron-right'></i>
          </button>
        )}

        <div className="image-details">
        
          <div className="flex alig-items-center"> <i className='bx bxs-user'></i> <span className="text-muted">Uploaded By : </span>  <span className="text-secondary">{fullName}</span></div>
            <div className="flex alig-items-center"> <i class='bx bxs-calendar' ></i> <span className="text-muted">Date : </span> <span className="text-secondary"> {date}</span></div>
              <div className="flex alig-items-center"> <i class='bx bx-map' ></i> <span className="text-muted">Uploaded By : </span>  <span className="text-secondary">{buildingName} <i className='bx bx-chevron-right'></i> {floorName} <i className='bx bx-chevron-right'></i>
            {workAreaName || "Unknown"} <i className='bx bx-chevron-right'></i> {activityName}</span></div>
                <div className="flex alig-items-center"> <i className='bx bx-comment-dots'></i> <span className="text-muted">comment : </span>  <span className="text-secondary">{batchComment}</span></div>
          
       
        </div>
      </div>
    </div>
  );
};

export default ImagePop;