import React, { useState } from "react";
import Image from "next/image";
import { AiOutlineCamera } from "react-icons/ai";
import axios from "axios";
import Compressor from 'compressorjs';

interface ImageBoxProps {
  id: number;
  onImageUpload: (id: number, imageUrl: string) => void;
  imageUrl?: string;
  onError?: (message: string) => void;
}

const ImageBox: React.FC<ImageBoxProps> = ({ id, onImageUpload, imageUrl, onError  }) => {
  
  const [localImageUrl, setLocalImageUrl] = useState<string | null>(null); 

  const handleImageChange = async(event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];

    const validType = file && ['image/jpeg', 'image/png'].includes(file?.type)
    const validSize = file && file?.size < 5_000_000 // 5MB

    if (!(validType && validSize)) {
      const message = !validType
      ? 'Image type should be JPEG or PNG.'
      : 'Image size should be smaller than 5MB.';
      onError && onError(message);
      return
    }
    
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const newImageUrl = reader.result as string;
        setLocalImageUrl(newImageUrl);
      };
      reader.readAsDataURL(file);
      
      try {

        const compressedFile: unknown = await compressFile(file);
       
        const formData = new FormData();
        formData.append('file', compressedFile as Blob,file.name);
  
        const response = await axios.post('https://api.jazzagain.com/public/index.php/api/uploadImage', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
  
        console.log('File uploaded successfully:', response.data);
        onImageUpload(id,response.data.file); 
      } catch (error) {
        console.error('Error uploading file:', error);
      }
    }
  };

  React.useEffect(() => {
    console.log(`Image URL for ID ${id}:`, imageUrl);
    if (!imageUrl) {
      setLocalImageUrl(null);
    }
  }, [imageUrl, id]);


  const compressFile = (file:any) => {
    return new Promise((resolve, reject) => {
      new Compressor(file, {
        quality: 0.3,
        success(result) {
          resolve(result);
        },
        error(error) {
          reject(error);
        },
      });
    });
  };
  

  return (
    <label htmlFor={`fileInput-${id}`} className="w-28 h-28 sm:w-32 sm:h-32  flex flex-col items-center justify-center border border-gray-300  cursor-pointer">
      {localImageUrl || imageUrl ? (
        <Image
          src={localImageUrl || imageUrl || ''}
          alt={`Uploaded Preview ${id}`}
          width={500}
          height={500}
          className="w-full h-full object-contain"
        />
      ) : (
        <>
          <AiOutlineCamera size={50} className="text-gray-500" />
          <span className="text-gray-500 text-center">Add Photo</span>
        </>
      )}
      <input type="file" id={`fileInput-${id}`} className="hidden" accept="image/png, image/jpeg" onChange={handleImageChange} />
    </label>
  );
};

export default ImageBox;