import tw from "twin.macro";
import { useDropzone } from "react-dropzone";
import { useMemo } from "react";
import { useApiClient, useCompany } from "@utils/NejManager/NejProvider";
import axios from "axios";
import { useField } from "formik";
import NejDropzone from "./NejDropzone";

/**
 * Renders a file input field with dropzone functionality.
 *
 * @param {Object} props - The component props.
 * @param {boolean} props.single - Whether to allow only one file to be uploaded
 * @param {string | string[]} props.accept - Array of supported file extensions.
 * @returns {JSX.Element} The rendered file input field.
 */
export function FileField({ single, accept, ...props }) {
  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}/>;
}