import React from 'react';
import classNames from 'classnames';

import { TextInput as CoreTextInput } from '@shoptet/ui-core-web';
import type { SafeOmit } from '@shoptet/utils';

import type { Complete, Exact, Size } from '../../../types';
import type { CommonInputProps, PlaceholderProps } from '../types';

export interface TextInputCommonProps
  extends SafeOmit<CommonInputProps, 'label' | 'value' | 'defaultValue'>, PlaceholderProps {}

export interface TextInputOwnProps {
  label?: string;

  value?: string | number;
  defaultValue?: string | number;

  width?: Size;
}

/** @inheritdoc */
export interface TextInputProps extends TextInputOwnProps, TextInputCommonProps {}

type GetInputClassName = Complete<Pick<TextInputProps, 'width' | 'error' | 'warning'>>;

export const getTextInputClassName = ({ width, error, warning }: GetInputClassName) =>
  classNames('textField', width, {
    'error-field': error,
    'warning-field': warning && !error,
  });

export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
  ({ width = 'md', error, warning, label, value, defaultValue, ...rest }, ref) => {
    rest satisfies Exact<SafeOmit<CommonInputProps, 'label'> & PlaceholderProps, typeof rest>;

    return (
      <CoreTextInput
        ref={ref}
        className={getTextInputClassName({ width, error, warning })}
        invalid={!!error}
        value={value === undefined ? undefined : String(value)}
        defaultValue={defaultValue === undefined ? undefined : String(defaultValue)}
        a11yLabel={label}
        {...rest}
      />
    );
  }
);

TextInput.displayName = 'TextInput';