// Adapted from Mantine FileInput (MIT). See THIRD_PARTY_NOTICES.md.
import {
  useId,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
} from "react";

export interface FileInputProps extends Omit<
  ComponentProps<"input">,
  "type" | "value" | "defaultValue" | "onChange" | "className" | "style"
> {
  label: string;
  description?: string;
  error?: string;
  placeholder?: string;
  clearable?: boolean;
  onChange?: (files: File[]) => void;
  className?: string;
  style?: CSSProperties;
  inputClassName?: string;
  inputStyle?: CSSProperties;
}

export function FileInput({
  label,
  description,
  error,
  placeholder = "No files selected",
  clearable = true,
  onChange,
  id,
  multiple,
  disabled,
  className = "",
  style,
  inputClassName = "",
  inputStyle,
  "aria-describedby": describedBy,
  ...props
}: FileInputProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const inputRef = useRef<HTMLInputElement>(null);
  const [files, setFiles] = useState<File[]>([]);
  const hint = error ?? description;
  const hintId = `${inputId}-hint`;
  const fileNames = files.map((file) => file.name).join(", ");

  const updateFiles = (next: File[]) => {
    setFiles(next);
    onChange?.(next);
  };

  return (
    <div className={`ynr-file-input ynr-field ${className}`} style={style}>
      <label htmlFor={inputId}>{label}</label>
      <div className="ynr-file-input-control">
        <input
          {...props}
          ref={inputRef}
          id={inputId}
          type="file"
          multiple={multiple}
          disabled={disabled}
          className={`ynr-file-input-field ${inputClassName}`}
          style={inputStyle}
          onChange={(event) =>
            updateFiles(Array.from(event.currentTarget.files ?? []))
          }
          aria-invalid={error ? true : props["aria-invalid"]}
          aria-describedby={[
            describedBy,
            `${inputId}-selection`,
            hint ? hintId : undefined,
          ]
            .filter(Boolean)
            .join(" ")}
        />
        <span
          id={`${inputId}-selection`}
          className="ynr-file-input-value"
          aria-live="polite"
        >
          {fileNames || placeholder}
        </span>
        {clearable && files.length > 0 && !disabled && (
          <button
            type="button"
            className="ynr-file-input-clear"
            aria-label="Clear selected files"
            onClick={() => {
              if (inputRef.current) inputRef.current.value = "";
              updateFiles([]);
            }}
          >
            Clear
          </button>
        )}
      </div>
      {hint && (
        <p id={hintId} className={error ? "ynr-error" : "ynr-hint"}>
          {hint}
        </p>
      )}
    </div>
  );
}