import type { ForwardedRef, ReactNode } from 'react';
import React, { useId, useMemo } from 'react';
import classNames from 'classnames';

import { omit, pick } from '@shoptet/utils';

import { forwardRef } from '../../../utils/forwardRef';
import type { FormRowProps } from '../../FormRow/FormRow';
import { FormRow } from '../../FormRow/FormRow';
import type { FormRowHelperTextOwnProps } from '../../FormRow/FormRowHelperText';
import { InputLoader } from '../../Inputs/InputLoader';
import type { SelectKey, SingleSelectProps } from '../../Inputs/SingleSelect/SingleSelect';
import { SingleSelect } from '../../Inputs/SingleSelect/SingleSelect';

/**
 * All props inherited from the `FormRow` component and the `SearchInput` component.
 *
 * Omitted props:
 * - 'as' field container cannot be used as a `HTMLLabelElement` due complexity of combobox
 * - `error` and `warning` simplified booleans of `SearchInput` component
 * @inheritdoc
 */
interface SingleSelectFieldInheritedProps
  extends
    Partial<FormRowHelperTextOwnProps>,
    Omit<FormRowProps, 'as' | 'className' | 'children' | 'label' | 'htmlFor' | 'isFullWidth'> {}

/** @inheritdoc */
export interface SingleSelectFieldProps<T extends object = object, V extends SelectKey = string>
  extends Omit<SingleSelectProps<T, V>, 'error' | 'warning'>, SingleSelectFieldInheritedProps {
  /**
   * 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?: ReactNode;
  /**
   * Display loading indicator.
   */
  loading?: boolean;
}

export const SingleSelectField = Object.assign(
  forwardRef(function SingleSelectField<T extends object = object, V extends SelectKey = string>(
    {
      UNSAFE_addon: addon,
      emptyOptionsLabel,
      error,
      hint,
      id,
      justify,
      label,
      labelHidden,
      required,
      tooltip,
      warning,
      width,
      ...rest
    }: SingleSelectFieldProps<T, V>,
    forwardedRef: ForwardedRef<HTMLInputElement>
  ) {
    const helperTextElement = useMemo(
      () => <FormRow.HelperText error={error} warning={warning} hint={hint} />,
      [error, hint, warning]
    );

    const internalId = useId();
    const inputId = id ?? `singleSelect${internalId}`;

    return (
      <FormRow
        as='div'
        htmlFor={inputId}
        justify={justify}
        label={label}
        labelHidden={labelHidden}
        required={required}
        tooltip={tooltip}
        isFullWidth={width === 'full'}
        {...pick(rest, 'data-testid')}
      >
        <div
          className={classNames('v2FormField__singleSelect', {
            'v2FormField__singleSelect--modeSearch': rest.mode === 'search',
            'v2FormField__singleSelect--modePicker': rest.mode === 'picker',
          })}
        >
          <InputLoader loading={rest.loading}>
            <SingleSelect
              id={inputId}
              ref={forwardedRef}
              label={label}
              error={!!error}
              warning={!!warning}
              width={width}
              emptyOptionsLabel={emptyOptionsLabel}
              {...omit(rest, 'data-testid')}
            />
          </InputLoader>
          {helperTextElement}
        </div>
        {addon}
      </FormRow>
    );
  }),
  {
    Option: SingleSelect.Option,
  }
);