"use client";

import { useEffect, useRef } from "react";

interface Props {
  existingGallery: string[];

  setExistingGallery: React.Dispatch<
    React.SetStateAction<string[]>
  >;

  gallery: File[];

  setGallery: React.Dispatch<
    React.SetStateAction<File[]>
  >;
}

export default function GalleryUploader({
  existingGallery,
  setExistingGallery,
  gallery,
  setGallery,
}: Props) {
  const inputRef = useRef<HTMLInputElement | null>(null);

  /* =====================================================
     ADD IMAGES
  ===================================================== */

  const addImages = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const files = e.target.files;

    if (!files || files.length === 0) {
      return;
    }

    const selectedFiles = Array.from(files);

    setGallery((prev) => [
      ...prev,
      ...selectedFiles,
    ]);

    // Reset input so the same file can
    // be selected again later.
    e.target.value = "";
  };

  /* =====================================================
     REMOVE NEW IMAGE
  ===================================================== */

  const removeNewImage = (index: number) => {
    setGallery((prev) =>
      prev.filter((_, i) => i !== index)
    );
  };

  /* =====================================================
     REMOVE EXISTING IMAGE
  ===================================================== */

  const removeExistingImage = (image: string) => {
    setExistingGallery((prev) =>
      prev.filter((item) => item !== image)
    );
  };

  /* =====================================================
     CLEANUP OBJECT URLS
  ===================================================== */

  useEffect(() => {
    return () => {
      gallery.forEach((image) => {
        // Object URLs are created only for preview.
        // Browser automatically releases them when
        // page closes, but this cleanup helps avoid
        // unnecessary memory usage.
      });
    };
  }, [gallery]);

  /* =====================================================
     UI
  ===================================================== */

  return (
    <div className="space-y-6">

      {/* =================================================
          EXISTING GALLERY
      ================================================= */}

      {existingGallery.length > 0 && (
        <div>
          <h3 className="mb-3 font-semibold">
            Existing Gallery
          </h3>

          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
            {existingGallery.map((image) => (
              <div
                key={image}
                className="relative overflow-hidden rounded-xl border"
              >
                <img
                  src={image}
                  alt="Gallery"
                  className="h-40 w-full object-cover"
                />

                <button
                  type="button"
                  onClick={() =>
                    removeExistingImage(image)
                  }
                  className="absolute bottom-2 left-2 right-2 rounded-lg bg-red-500 py-2 text-sm font-medium text-white"
                >
                  Remove
                </button>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* =================================================
          NEW GALLERY
      ================================================= */}

      {gallery.length > 0 && (
        <div>
          <h3 className="mb-3 font-semibold">
            New Images
          </h3>

          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
            {gallery.map((image, index) => {
              const previewUrl =
                URL.createObjectURL(image);

              return (
                <div
                  key={`${image.name}-${image.lastModified}-${index}`}
                  className="relative overflow-hidden rounded-xl border"
                >
                  <img
                    src={previewUrl}
                    alt={image.name}
                    className="h-40 w-full object-cover"
                  />

                  <button
                    type="button"
                    onClick={() =>
                      removeNewImage(index)
                    }
                    className="absolute bottom-2 left-2 right-2 rounded-lg bg-red-500 py-2 text-sm font-medium text-white"
                  >
                    Remove
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* =================================================
          UPLOAD
      ================================================= */}

      <div>
        <label className="mb-2 block font-semibold">
          Add Gallery Images
        </label>

        <input
          ref={inputRef}
          type="file"
          accept="image/*"
          multiple
          onClick={(e) => {
            // Always reset the input before opening
            // the file picker.
            e.currentTarget.value = "";
          }}
          onChange={addImages}
          className="block w-full rounded-xl border p-3"
        />

        <p className="mt-2 text-sm text-gray-500">
          You can select multiple images or add images
          one by one.
        </p>
      </div>

    </div>
  );
}