import styles from '@/styles/ImageUpload.module.css';

function ImageUpload({ addImageCallback }: { addImageCallback: (imageUrl: string) => void }) {

  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target?.files;
    const file = files && files.length > 0 ? files[0] : null;
    if (file && file.type.startsWith('image/')) {
      const imageUrl = URL.createObjectURL(file);
      addImageCallback(imageUrl);
    } else {
      console.error("Invalid File; Not Image Or No File given");
    }
  };

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
    if (file && file.type.startsWith('image/')) {
      const imageUrl = URL.createObjectURL(file);
      addImageCallback(imageUrl);
    } else {
      console.error("Invalid File; Not Image Or No File given");
    }
  };

  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

  return (
    <div
      onDrop={handleDrop}
      onDragOver={handleDragOver}
      className={styles.dropZone}
    >
      <input
        type="file"
        accept="image/*"
        onChange={handleImageChange}
        style={{ display: 'none' }}
        id="file-input"
      />
      <label htmlFor="file-input" style={{ cursor: 'pointer' }}>
        Ziehe ein Bild hierher, oder klicke, um ein Bild auszuwählen.
      </label>
    </div>
  );
}

export default ImageUpload;