import React from 'react';

import { extractStringLabel, type SafeOmit, type SafePick } from '@shoptet/utils';

import type { FieldProps } from '../../Field/Field';
import { Field } from '../../Field/Field';
import type { FieldHelperTextProps } from '../../Field/FieldHelperText';
import type { FieldLabelProps } from '../../Field/FieldLabel';
import { InputLoader } from '../../Inputs/InputLoader';
import type { TextInputProps } from '../../Inputs/TextInput/TextInput';
import { TextInput } from '../../Inputs/TextInput/TextInput';
import type { LabelAfterProps } from '../../LabelAfter/LabelAfter';

/** @inheritdoc */
export interface TextFieldProps
  extends
    SafePick<FieldProps, 'tooltip' | 'required' | 'disabled' | 'readOnly'>,
    SafePick<FieldLabelProps, 'justify'>,
    SafeOmit<TextInputProps, 'error' | 'warning' | 'label'>,
    SafePick<FieldHelperTextProps, 'error' | 'warning' | 'hint'> {
  /**
   * Label for the input element.
   */
  label: string;
  /**
   * Visually hide the label.
   */
  labelHidden?: FieldLabelProps['visuallyHidden'];
  /**
   * Addon to the right of the input.
   *
   * **INTERNAL USE ONLY:** It is unsafe to rely on this prop, as it may change or be removed in the future.
   * @internal
   */
  UNSAFE_addon?: React.ReactNode;
  /**
   * Label displayed after the input element.
   */
  labelAfter?: LabelAfterProps['label'];
  /**
   * Display loading indicator.
   */
  loading?: boolean;
}

export const TextField: React.FC<TextFieldProps> = React.forwardRef<HTMLInputElement, TextFieldProps>(
  function TextField(
    {
      UNSAFE_addon: addon,
      tooltip,
      required,
      label,
      labelHidden,
      labelAfter,
      loading,
      error,
      warning,
      hint,
      width,
      disabled,
      readOnly,
      justify,
      ...inputProps
    }: TextFieldProps,
    ref
  ) {
    return (
      <Field
        tooltip={tooltip}
        isFullWidth={width === 'full'}
        invalid={!!error}
        required={required}
        disabled={disabled}
        readOnly={readOnly}
      >
        <Field.Label justify={justify} visuallyHidden={labelHidden}>
          {label}
        </Field.Label>
        <div className='v2FormField__input'>
          <InputLoader loading={loading}>
            <TextInput ref={ref} label={label} error={!!error} warning={!!warning} width={width} {...inputProps} />
          </InputLoader>
          {labelAfter && <Field.LabelAfter label={extractStringLabel(labelAfter)}>{labelAfter}</Field.LabelAfter>}
          <Field.HelperText error={error} warning={warning} hint={hint} />
        </div>
        {addon}
      </Field>
    );
  }
);