// Adapted from Untitled UI React (MIT). See THIRD_PARTY_NOTICES.md.
import { useId, useState, type ComponentProps } from "react";

export interface InputFileProps extends Omit<
  ComponentProps<"input">,
  "type" | "children"
> {
  label: string;
  description?: string;
  error?: string;
  buttonLabel?: string;
  inputClassName?: string;
  onFilesChange?: (files: FileList | null) => void;
}

export function InputFile({
  label,
  description,
  error,
  buttonLabel = "Choose files",
  id,
  className = "",
  inputClassName = "",
  onChange,
  onFilesChange,
  multiple,
  disabled,
  "aria-describedby": describedBy,
  ...props
}: InputFileProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const hint = error ?? description;
  const hintId = `${inputId}-hint`;
  const [fileNames, setFileNames] = useState("");

  return (
    <div className={`ynr-input-file ${className}`}>
      <label className="ynr-input-file-label" htmlFor={inputId}>
        {label}
      </label>
      <div className="ynr-input-file-control">
        <span className="ynr-input-file-value" aria-hidden="true">
          {fileNames || (multiple ? "No files selected" : "No file selected")}
        </span>
        <label
          className="ynr-input-file-button"
          htmlFor={disabled ? undefined : inputId}
          aria-disabled={disabled || undefined}
        >
          {buttonLabel}
        </label>
        <input
          {...props}
          id={inputId}
          type="file"
          multiple={multiple}
          disabled={disabled}
          className={`ynr-input-file-native ${inputClassName}`}
          aria-invalid={error ? true : props["aria-invalid"]}
          aria-describedby={
            [describedBy, hint ? hintId : undefined]
              .filter(Boolean)
              .join(" ") || undefined
          }
          onChange={(event) => {
            const files = event.currentTarget.files;
            setFileNames(
              files?.length
                ? Array.from(files, (file) => file.name).join(", ")
                : "",
            );
            onChange?.(event);
            onFilesChange?.(files);
          }}
        />
      </div>
      {hint && (
        <p id={hintId} className={error ? "ynr-error" : "ynr-hint"}>
          {hint}
        </p>
      )}
    </div>
  );
}