// @flow strict

import * as React from 'react';

import classify from '../../../utils/classify';
import {Button} from '../../Button';
import type {IconType} from '../../Icon';

import css from './ButtonTab.module.css';


type ClassNames = $ReadOnly<{wrapper?: string}>;

export type ButtonTabProps = {
  classNames?: ClassNames,
  children?: React.Node,
  disabled?: boolean,
  onButtonTabSelect?: ?(id: string, e?: ?SyntheticEvent<HTMLElement>) => mixed,
  iconName?: string,
  iconType?: IconType,
  size?: 'medium' | 'small',
  isFluid?: boolean,
  ariaLabel?: string,
  id: string,
  selectedButtonTabId?: string,
  isLoading?: boolean,
  isLeftCurved?: boolean,
  isRightCurved?: boolean,
  ...
};

export const ButtonTab: React$AbstractComponent<
  ButtonTabProps,
  HTMLButtonElement,
> = React.forwardRef<ButtonTabProps, HTMLButtonElement>(
  (
    {
      classNames,
      children,
      iconName,
      iconType = 'regular',
      size,
      onButtonTabSelect,
      id,
      selectedButtonTabId,
      disabled,
      isLeftCurved,
      isRightCurved,
      ...props
    }: ButtonTabProps,
    ref,
  ): React.Node => (
    <Button
      {...props}
      disabled={disabled}
      size={size}
      type="tertiary"
      ref={ref}
      classNames={{
        wrapper: classify(
          css.buttonTabWrapper,
          {
            [css.mediumButtonTab]: size === 'medium',
            [css.smallButtonTab]: size === 'small',
            [css.onlyIcon]: iconName && !children,
            [css.isSelected]: id === selectedButtonTabId,
            [css.disabled]: disabled,
            [css.leftCurved]: isLeftCurved,
            [css.rightCurved]: isRightCurved,
          },
          classNames?.wrapper,
        ),
        icon: css.icon,
      }}
      iconLeftName={iconName}
      iconLeftType={iconType}
      onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
    >
      {children}
    </Button>
  ),
);