/**
 * A form's file field.
 *
 * @module
 */

import {
  Controller,
  type FieldValues,
  type Path,
  type RegisterOptions,
  useFormContext,
} from "react-hook-form";

import { FileDropZone } from "./FileDropZone.tsx";

/** The props of {@link FileField}. */
export interface FileFieldProps<T extends FieldValues> {
  /** The field's name in the form. */
  name: Path<T>;
  /** The field's label. */
  label?: string;
  /** The drop zone's prompt. */
  hint?: string;
  /** Whether to state the size limit. */
  showLimit?: boolean;
  /** Whether the field takes no file. */
  disabled?: boolean;
  /** The field's validation rules. */
  rules?: RegisterOptions<T, Path<T>>;
  /** Side effect run after the field value changes (e.g. derive a title). */
  onValueChange?: (file: File | null) => void;
}

/**
 * Renders a `Controller`-wrapped {@link FileDropZone} bound to react-hook-form,
 * with the field's error under it.
 */
export function FileField<T extends FieldValues>({
  name,
  label,
  hint,
  showLimit,
  disabled,
  rules,
  onValueChange,
}: FileFieldProps<T>): React.JSX.Element {
  const { control, formState: { errors } } = useFormContext<T>();
  const error = errors[name];

  return (
    <div className="form-field">
      {label && <span className="form-label">{label}</span>}
      <Controller
        name={name}
        control={control}
        rules={rules}
        render={({ field }) => (
          <FileDropZone
            file={(field.value as File | null) ?? null}
            onChange={(file) => {
              field.onChange(file);
              onValueChange?.(file);
            }}
            hint={hint}
            showLimit={showLimit}
            disabled={disabled}
          />
        )}
      />
      {error?.message && (
        <span className="form-hint form-hint--error">
          {String(error.message)}
        </span>
      )}
    </div>
  );
}