import Image from "next/image";
import { useState } from "react";
import { AiOutlineCamera } from "react-icons/ai";
import axios from "axios";

interface ImageBoxProps {
  onStateChange: (imageUrl: string) => void;
}

const ImageBox : React.FC<ImageBoxProps> = ({ onStateChange }) => {

  const [imageUrl, setImageUrl] = useState<string | null>(null);


  const handleImageChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
  
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImageUrl(reader.result as string);
      };
      reader.readAsDataURL(file);
  
      try {
       
        const formData = new FormData();
        formData.append('file', file);
  
        const response = await axios.post('https://api.jazzagain.com/public/index.php/api/uploadImage', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
  
        // Handle the response 
        console.log('File uploaded successfully:', response.data);
        onStateChange(response.data.file); 
      } catch (error) {
        // Handle error (e.g., show an error message)
        console.error('Error uploading file:', error);
      }
    }
  };
  
  return (
    <>
      <label
        htmlFor="fileInput"
        className="w-44 h-44  flex flex-col items-center justify-center border border-gray-300  cursor-pointer"
      >
        {imageUrl ? (
          <Image
            src={imageUrl}
            alt="Uploaded Preview"
            className="w-full h-full object-contain"
            width={500}
            height={500}
          />
        ) : (
          <>
            <AiOutlineCamera size={50} className="text-gray-500"/>
            <span className="text-gray-500 text-center">Add Photo</span>
          </>
        )}
        <input
          // required
          type="file"
          id="fileInput"
          className="hidden"
          accept="image/*"
          onChange={handleImageChange}
        />
      </label>
    </>
  );
};
export default ImageBox;