import type { ReactNode } from 'react';
import React from 'react';

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

import type { RichText } from '../../../types';
import type { FieldProps } from '../../Field/Field';
import { Field } from '../../Field/Field';
import type { FieldLabelProps } from '../../Field/FieldLabel';
import { InputLoader } from '../../Inputs/InputLoader';
import { NumberInput, type NumberInputProps } from '../../Inputs/NumberInput/NumberInput';
import type { LabelAfterProps } from '../../LabelAfter/LabelAfter';

/** Drops the boolean-flag form of a helper prop so only renderable text reaches `Field.HelperText`. */
function toHelperText(value: ReactNode): RichText | undefined {
  return typeof value === 'boolean' || value == null ? undefined : (value as RichText);
}

/** @inheritdoc */
export interface NumberFieldProps
  extends
    SafePick<FieldProps, 'tooltip' | 'required' | 'disabled' | 'readOnly'>,
    SafePick<FieldLabelProps, 'justify'>,
    SafeOmit<NumberInputProps, 'error' | 'warning' | 'label'> {
  /**
   * Label for the input element.
   */
  label: string;
  /**
   * Visually hide the label.
   */
  labelHidden?: FieldLabelProps['visuallyHidden'];
  /**
   * Helper text instructing user on how to fill out the field that are critical and should be resolved to continue.
   * Passing `true` marks the field invalid without a message.
   */
  error?: ReactNode;
  /**
   * Helper text instructing user on how to fill out the field that are not critical to resolve to continue.
   */
  warning?: ReactNode;
  /**
   * Helper text instructing user on how to fill out the field. Using hint over placeholder text is preferred.
   */
  hint?: ReactNode;
  /**
   * 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 NumberField: React.FC<NumberFieldProps> = React.forwardRef<HTMLInputElement, NumberFieldProps>(
  function NumberField(
    {
      UNSAFE_addon: addon,
      tooltip,
      required,
      label,
      labelHidden,
      labelAfter,
      loading,
      error,
      warning,
      hint,
      width,
      disabled,
      readOnly,
      justify,
      ...inputProps
    }: NumberFieldProps,
    ref
  ) {
    return (
      <Field
        {...pick(inputProps, 'data-testid')}
        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}>
            <NumberInput
              ref={ref}
              label={label}
              required={required}
              disabled={disabled}
              readOnly={readOnly}
              error={!!error}
              warning={!!warning}
              width={width}
              {...inputProps}
            />
          </InputLoader>
          {labelAfter && <Field.LabelAfter label={extractStringLabel(labelAfter)}>{labelAfter}</Field.LabelAfter>}
          <Field.HelperText error={toHelperText(error)} warning={toHelperText(warning)} hint={toHelperText(hint)} />
        </div>
        {addon}
      </Field>
    );
  }
);