import type { ForwardedRef } from 'react';
import React, { forwardRef } from 'react';

import type { Complete, 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 { EmailInput, type EmailInputProps } from '../../Inputs/EmailInput/EmailInput';
import { InputLoader } from '../../Inputs/InputLoader';
import type { LabelAfterProps } from '../../LabelAfter/LabelAfter';
import { LabelAfter } from '../../LabelAfter/LabelAfter';

interface EmailFieldContainerProps extends Omit<FormRowProps, 'children' | 'htmlFor' | 'isFullWidth' | 'label'> {}
interface EmailFieldHelperTextProps extends Partial<FormRowHelperTextOwnProps> {}
interface EmailFieldInputProps extends Omit<EmailInputProps, 'error' | 'warning'> {}

/** @inheritdoc */
export interface EmailFieldProps extends EmailFieldContainerProps, EmailFieldHelperTextProps, EmailFieldInputProps {
  /**
   * Display loading indicator.
   */
  loading?: boolean;
  /**
   * Label displayed after the input element.
   */
  labelAfter?: LabelAfterProps['label'];
}

export const EmailField: React.FC<EmailFieldProps> = forwardRef(function EmailField(
  props: EmailFieldProps,
  forwardedRef: ForwardedRef<HTMLInputElement>
) {
  const [formRowProps, helperTextProps, inputProps] = destruct(
    props,
    ['as', 'justify', 'labelHidden', 'required', 'tooltip'],
    ['error', 'warning', 'hint']
  );
  formRowProps satisfies Exact<Complete<EmailFieldContainerProps>, typeof formRowProps>;
  helperTextProps satisfies Exact<Complete<EmailFieldHelperTextProps>, typeof helperTextProps>;
  inputProps satisfies Exact<
    Complete<Omit<EmailFieldInputProps, 'required'> & Pick<EmailFieldProps, 'loading' | 'labelAfter' | 'label'>>,
    typeof inputProps
  >;

  return (
    <FormRow {...formRowProps} {...pick(inputProps, 'data-testid', 'label')}>
      <div className='v2FormField__input'>
        <InputLoader loading={inputProps.loading}>
          <EmailInput
            ref={forwardedRef}
            required={formRowProps.required}
            error={!!helperTextProps.error}
            warning={!!helperTextProps.warning}
            {...omit(inputProps, 'data-testid', 'loading', 'labelAfter')}
          />
        </InputLoader>
        {inputProps.labelAfter && <LabelAfter label={inputProps.labelAfter} />}
        <FormRow.HelperText {...helperTextProps} />
      </div>
    </FormRow>
  );
});