import React from 'react';

import type { CommonInputProps } from '../types';

import { FileInputButton } from './FileInputButton';
import { FileItem } from './FileItem';
import { useFileInput } from './hooks';

/** @inheritdoc */
export interface FileInputProps extends Omit<
  CommonInputProps,
  'error' | 'warning' | 'loading' | 'onChange' | 'onFocus' | 'onBlur'
> {
  children?: React.ReactNode;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
  onBlur?: React.FocusEventHandler<HTMLInputElement>;
}

const Input = React.forwardRef<HTMLInputElement, FileInputProps>(({ children, label, ...inputProps }, ref) => (
  <div className='fileField'>
    <input {...inputProps} ref={ref} aria-label={label} />
    {children}
  </div>
));

Input.displayName = 'FileInput';

export const FileInput = Object.assign({}, { Container: Input, Item: FileItem, Button: FileInputButton, useFileInput });