import { ReactElement } from 'react';

import { useBaseTextFieldContext } from '../../form/BaseTextField/contexts/BaseTextFieldContext';
import { CommonProps } from '../../types';
import { assertEmptyObject } from '../../utils/assertEmptyObject';
import { ButtonProps } from '../Button/Button';
import { ButtonAppearance } from '../Button/constants';
import { IconGlyph } from '../Icon/constants';

import { TunedButton, TunedIcon } from './styled';

/** Props for {@link FieldSuffixIconButton} */
export interface FieldSuffixIconButtonProps
  extends CommonProps,
    Pick<ButtonProps, 'onClick' | 'onMouseDown'> {
  /** icon that should be displayed */
  icon: IconGlyph | ReactElement;
  /** Description of button for a11y */
  ariaLabel: string;
}

/**
 * An icon button that can be added as a suffix to fields that have the property `suffix`
 *
 * ```tsx
 * <TextField
 *   suffix={<FieldSuffixIconButton ariaLabel="Clear" icon={IconGlyph.CloseCircle} onClick={handleClick} />}
 * />
 * ```
 *
 * ```tsx
 * <NumberField
 *   suffix={<FieldSuffixIconButton ariaLabel="Clear" icon={IconGlyph.CloseCircle} onClick={handleClick} />}
 * />
 * ```
 */
export function FieldSuffixIconButton(props: FieldSuffixIconButtonProps) {
  const { ariaLabel, icon, onClick, onMouseDown, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const { disabled } = useBaseTextFieldContext();

  if (!icon) {
    return null;
  }

  return (
    <TunedButton
      appearance={ButtonAppearance.Subtle}
      ariaDescribedBy={ariaDescribedBy}
      ariaLabel={ariaLabel}
      className={className}
      disabled={disabled}
      onClick={onClick}
      onMouseDown={onMouseDown}
      testId={testId}
    >
      {typeof icon === 'string' ? <TunedIcon glyph={icon} /> : icon}
    </TunedButton>
  );
}