import { FieldHookConfig, useField } from "formik";
import NejDropzone from "./NejDropzone";
import { Accept } from "react-dropzone";

/**
 * Renders a file input field with dropzone functionality.
 *
 * @param props - The component props.
 * @param props.single - Whether to allow only one file to be uploaded
 * @param props.accept - Array of supported file extensions.
 * @returns {JSX.Element} The rendered file input field.
 */
export function FileField({ single, accept, ...props }: FieldHookConfig<File | File[]> & { single?: boolean, accept?: Accept }) {
  const [field, meta, helpers] = useField(props);

  /**
   * Handles the upload of files.
   *
   * @param {Array<File>} files - The files to be uploaded.
   */
  function onUpload(files) {
    console.log(files)
    field.onChange({ target: { value: single ? files[0] : files, name: field.name } });
  }

  return <NejDropzone value={field.value} accept={accept} onDrop={onUpload} single={single} />;
}