import { clsx } from 'clsx';
import { forwardRef } from 'react';

import { SizeLarge, SizeMedium, SizeSmall } from '../common';
import { Merge } from '../utils';
import { inputClassNameBase } from './_common';
import { useInputAttributes } from './contexts';
import { useInputPaddings } from './InputGroup';

export interface InputProps extends Merge<
  React.ComponentPropsWithRef<'input'>,
  {
    size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
    shape?: 'rectangle' | 'pill';
    'aria-invalid'?: boolean;
  }
> {}

export const Input = forwardRef(function Input(
  { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,
  reference: React.ForwardedRef<HTMLInputElement | null>,
) {
  const inputAttributes = useInputAttributes();
  const inputPaddings = useInputPaddings();

  return (
    <input
      ref={reference}
      className={clsx(className, inputClassNameBase({ size }), 'np-input', {
        'np-input--shape-rectangle': shape === 'rectangle',
        'np-input--shape-pill': shape === 'pill',
      })}
      style={inputPaddings}
      {...inputAttributes}
      {...restProps}
    />
  );
});