import React, { ReactNode } from "react"
import Dropzone from "react-dropzone"

/**
 * Props for multiple file dropzone
 */
interface MultipleFileDropzoneProps {
  /** Files currently in the dropzone */
  files: File[]
  /** Callback when files are changed */
  onFilesChange: (files: File[]) => void
  /** Label for the dropzone */
  label: ReactNode
}

/**
 * Props for single file dropzone
 */
interface SingleFileDropzoneProps {
  /** Single file currently in the dropzone */
  file?: File
  /** Callback when single file is changed */
  onFileChange: (file: File) => void
  /** Label for the dropzone */
  label: ReactNode
}

type FileDropzoneProps = MultipleFileDropzoneProps | SingleFileDropzoneProps

/**
 * Dropzone for files
 */
export function FileDropzone(props: FileDropzoneProps) {
  // Determine if multiple mode based on which props are passed
  const multiple = "files" in props

  const handleDrop = (files: File[]) => {
    if (multiple) {
      props.onFilesChange(files)
    } else {
      props.onFileChange(files[0])
    }
  }

  const files = multiple ? props.files : (props.file ? [props.file] : [])

  return (
    <Dropzone onDrop={handleDrop} multiple={multiple}>
      {({ getRootProps, getInputProps, isDragActive }) => (
        <div
          {...getRootProps()}
          className="dropzone"
          style={{
            padding: "40px 40px",
            border: isDragActive ? "2px dashed var(--bs-primary)" : "2px dashed var(--bs-border-color)",
            borderRadius: "5px",
            textAlign: "center",
            verticalAlign: "middle"
          }}
        >
          <input {...getInputProps()} />
          {(multiple || files.length == 0) ? props.label : null}
          {files.map((file) => (
            <div key={file.name}>
              <i className="fas fa-file-alt text-muted" style={{ marginRight: "10px" }} />
              {file.name}
            </div>
          ))}
        </div>
      )}
    </Dropzone>
  )
}