'use client';
import {
  Dropzone,
  DropZoneArea,
  DropzoneDescription,
  DropzoneFileListItem,
  DropzoneMessage,
  DropzoneRemoveFile,
  DropzoneTrigger,
  useDropzone
} from '@/components/ui/dropzone';
import { useGlobalContext } from '@/context/Provider';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import { Trash2Icon, ImagePlus } from 'lucide-react';
import { useEffect, useState } from 'react';

export function MultiImages({ addImages,images }: { addImages: any,images?:any }) {
  const { Toast } = useGlobalContext();
  const [uploadedImages, setUploadedImages] = useState<any[]>([]); 

  const dropzone = useDropzone({
    onDropFile: async (file: File) => {
      try {
        const uploadedImage = await handleUploadImage(file);
        if (uploadedImage) {
          setUploadedImages((prevImages) => {
            const validPrevImages = Array.isArray(prevImages) ? prevImages : [];
            const newImages = [...validPrevImages, uploadedImage];
            addImages(newImages);
            return newImages;
          });
        
          return { status: "success", result: uploadedImage.url };
        }else {
          return { status: "error", error: "Upload failed" }; 
        }
      } catch (error) {
        return { status: "error", error: "Unexpected error occurred" }; 
      }
    },
    validation: {
      accept: { "image/*": [".png", ".jpg", ".jpeg"] },
      maxSize: 10 * 1024 * 1024, // 10MB limit
      maxFiles: 10
    }
  });
  // console.log('uploadedImages',uploadedImages)
  useEffect(() => {
    setUploadedImages(images)
  }, [images])
  

  const handleUploadImage = async (file: File) => {
    try {
      const apiRes = await apis.Common.uploadFile("file", file);
      Toast.success("Image uploaded successfully!");

      return { 
        id: apiRes?.id || file.name, 
        url: apiRes?.key, 
        name: file.name 
      };
    } catch (error) {
      Toast.error(error);
      return null;
    }
  };

  const handleRemoveImage = (id: string) => {
    const updatedImages = uploadedImages?.filter(img => img.id !== id);
    setUploadedImages(updatedImages);
    addImages(updatedImages);
  };
  return (
    <div className="not-prose flex flex-col gap-4">
      <Dropzone {...dropzone}>
        <div>
          <div className="flex justify-between">
            <DropzoneDescription>
              Please select up to 10 images
            </DropzoneDescription>
            <DropzoneMessage />
          </div>
          <DropZoneArea>
          {uploadedImages?.length > 0 ? (
              <div className='w-full flex flex-row justify-center items-center p-4 flex-wrap gap-2'>
                {uploadedImages.map((file:any) => (
                  <DropzoneFileListItem
                    className="w-[23%] overflow-hidden rounded-md bg-secondary p-0 shadow-sm"
                    key={file.id}
                    file={file}
                  >
                    <div className="flex relative w-full flex-row h-[150px]">
                      <img
                        src={BUCKET_ROOT+file.url}
                        alt={file.name}
                        className="aspect-video object-cover rounded-lg"
                      />
                      <DropzoneRemoveFile 
                        className='absolute top-1 right-1 rounded-full' 
                        onClick={() => handleRemoveImage(file.id)}
                      >
                        <Trash2Icon className="size-4" />
                      </DropzoneRemoveFile>
                    </div>
                  </DropzoneFileListItem>
                ))}
                {uploadedImages.length < 10 && (
                  <DropzoneTrigger className="w-[23%] h-[150px] flex flex-col items-center justify-center bg-transparent content-center text-sm border-dotted border-[#CCCCCC] border-[2px]">
                    <div>
                      <ImagePlus />
                      <p className="font-semibold">Upload photo</p>
                    </div>
                  </DropzoneTrigger>
                )}
              </div>
            ) : (
              <DropzoneTrigger className="flex flex-col items-center gap-4 bg-transparent p-10 text-center text-sm">
                <div>
                  <p className="font-semibold bg-[#FFCC293D] text-[#FDBE0C] p-3 rounded-[100px]">+ Upload photo</p>
                  <p className="text-[12px] text-[#999999]">Supported formats: .png, .jpg</p>
                </div>
              </DropzoneTrigger>
            )}

          </DropZoneArea>
        </div>


      </Dropzone>
    </div>
  );
}