import React, { useId } from 'react';

import type { Exact } from '../../../types';
import { destruct } from '../../../utils/destruct';
import { omit } from '../../../utils/omit';
import { pick } from '../../../utils/pick';
import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import { CounterInput, type CounterInputProps } from '../../Inputs/CounterInput/CounterInput';
import type { LabelAfterProps } from '../../LabelAfter/LabelAfter';
import { LabelAfter } from '../../LabelAfter/LabelAfter';

interface CounterFieldContainerProps extends Omit<FormRowProps, 'children' | 'isFullWidth' | 'label'> {}
interface CounterFieldHelperTextProps extends Partial<FormRowHelperTextOwnProps> {}
interface CounterFieldInputProps extends Omit<CounterInputProps, 'error' | 'warning'> {}

/** @inheritdoc */
export interface CounterFieldProps
  extends CounterFieldContainerProps, CounterFieldHelperTextProps, CounterFieldInputProps {
  /**
   * Label displayed after the input element.
   */
  labelAfter?: LabelAfterProps['label'];
}

export function CounterField(props: CounterFieldProps) {
  const generatedId = useId();
  const [formRowProps, helperTextProps, rest] = destruct(
    props,
    ['as', 'htmlFor', 'justify', 'labelHidden', 'required', 'tooltip'],
    ['error', 'hint', 'warning']
  );
  formRowProps satisfies Exact<CounterFieldContainerProps, typeof formRowProps>;
  helperTextProps satisfies Exact<CounterFieldHelperTextProps, typeof helperTextProps>;
  rest satisfies Exact<
    Omit<CounterFieldInputProps, 'required'> & Pick<CounterFieldProps, 'label' | 'labelAfter'>,
    typeof rest
  >;

  const inputId = formRowProps.htmlFor ?? generatedId;

  return (
    <FormRow {...pick(rest, 'data-testid')} {...formRowProps} as='div' htmlFor={inputId} label={rest.label}>
      <div className='v2FormField__input'>
        <CounterInput
          id={inputId}
          required={formRowProps.required}
          error={!!helperTextProps.error}
          warning={!!helperTextProps.warning}
          {...omit(rest, 'id', 'labelAfter', 'data-testid')}
        />
        {rest.labelAfter && <LabelAfter label={rest.labelAfter} />}
        <FormRow.HelperText {...helperTextProps} />
      </div>
    </FormRow>
  );
}