import type { ForwardedRef } from 'react';
import React from 'react';
import { 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 type { CheckboxProps } from '../../Inputs/Checkbox/Checkbox';
import { Checkbox } from '../../Inputs/Checkbox/Checkbox';
import type { LabelAfterProps } from '../../LabelAfter/LabelAfter';
import { LabelAfter } from '../../LabelAfter/LabelAfter';

export interface CheckboxFieldContainerProps extends Omit<
  FormRowProps,
  'children' | 'htmlFor' | 'isFullWidth' | 'label'
> {}
export interface CheckboxFieldHelperTextProps extends Partial<FormRowHelperTextOwnProps> {}
export interface CheckboxFieldInputProps extends Omit<
  CheckboxProps,
  'type' | 'loading' | 'width' | 'error' | 'warning'
> {}
export interface CheckboxFieldProps
  extends CheckboxFieldContainerProps, CheckboxFieldHelperTextProps, CheckboxFieldInputProps {
  /**
   * The label to display after the checkbox.
   */
  labelAfter?: LabelAfterProps['label'];
}

export const CheckboxField = forwardRef(function CheckboxField(
  props: CheckboxFieldProps,
  forwardedRef: ForwardedRef<HTMLInputElement>
) {
  const [formRowProps, helperTextProps, inputProps] = destruct(
    props,
    ['as', 'justify', 'labelHidden', 'required', 'tooltip'],
    ['error', 'hint', 'warning']
  );
  formRowProps satisfies Exact<Complete<CheckboxFieldContainerProps>, typeof formRowProps>;
  helperTextProps satisfies Exact<Complete<CheckboxFieldHelperTextProps>, typeof helperTextProps>;
  inputProps satisfies Exact<
    Complete<Omit<CheckboxFieldInputProps, 'required'> & Pick<CheckboxFieldProps, 'labelAfter' | 'label'>>,
    typeof inputProps
  >;

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