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

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 = moment(image.uploadedAt).format("YYYY-MM-DD");
  const time = moment(image.uploadedAt).format("hh:mm A");

  // 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">
        {/* Close button */}
        <button className="close-button" onClick={closeModal}>
          ×
        </button>

        {/* Previous button, only shown if there's a previous image */}
        {hasPrev && (
          <button className="nav-button prev-button" onClick={handlePrev}>
            &#8249; {/* Unicode for single left angle quotation mark */}
          </button>
        )}

        {/* The main image display */}
        <img src={image.url} alt="Preview" className="modal-image" />

        {/* Next button, only shown if there's a next image */}
        {hasNext && (
          <button className="nav-button next-button" onClick={handleNext}>
            &#8250; {/* Unicode for single right angle quotation mark */}
          </button>
        )}

        {/* Image details */}
        <div className="image-details">
          <p>
            <strong>👤 Uploaded By:</strong> {fullName}
          </p>
          <p>
            <strong>📅 Date:</strong> {date} {time}
          </p>
          <p>
            <strong>🏢 Location:</strong> {buildingName} &gt; {floorName} &gt;{" "}
            {workAreaName || "Unknown"} &gt; {activityName}
          </p>
          <p>
            {/* Display the comment from the batch object */}
            <strong>📝 Comments:</strong> {batchComment || "N/A"}
          </p>
        </div>
      </div>
    </div>
  );
};

export default ImagePop;