// @flow strict

import * as React from 'react';

import classify from '../../utils/classify';

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


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

export type ButtonTabsProps = {
  classNames?: ClassNames,
  children: React.Node,
  isFluid?: boolean,
  size?: 'medium' | 'small',
  disabled?: boolean,
  selectedButtonTabId?: string,
  onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
};

export const ButtonTabs: React$AbstractComponent<
  ButtonTabsProps,
  HTMLDivElement,
> = React.forwardRef<ButtonTabsProps, HTMLDivElement>(
  (
    {
      classNames,
      children,
      isFluid,
      size = 'medium',
      disabled,
      selectedButtonTabId,
      onButtonTabSelect,
    }: ButtonTabsProps,
    ref,
  ): React.Node => {
    const childrenWithProps = React.Children.map(children, (child) => {
      if (React.isValidElement(child)) {
        return React.cloneElement(child, {
          ...child.props,
          isFluid,
          size,
          disabled,
          selectedButtonTabId,
          onButtonTabSelect,
        });
      }
      return child;
    });

    return (
      <div
        data-testid="ButtonTabs"
        ref={ref}
        className={classify(
          css.buttonTabsWrapper,
          {
            [css.medium]: size === 'medium',
            [css.small]: size === 'small',
            [css.isFluid]: isFluid,
            [css.disabled]: disabled,
          },
          classNames?.wrapper,
        )}
      >
        {childrenWithProps}
      </div>
    );
  },
);