import React from 'react';

import { assertEmptyObject } from '../../utils/assertEmptyObject';

import { SimpleBadgeGroup, SimpleBadgeGroupProps } from './components/SimpleBadgeGroup/SimpleBadgeGroup';
import {
  TruncatedBadgeGroup,
  TruncatedBadgeGroupProps,
} from './components/TruncatedBadgeGroup/TruncatedBadgeGroup';

export type BadgeGroupProps = {
  /** Allows to hide some badges if space isn't enough */
  truncated?: boolean;
} & (
  | (SimpleBadgeGroupProps & {
      truncated?: false;
    })
  | (TruncatedBadgeGroupProps & {
      truncated: true;
    })
);

/**
 * The component allows grouping together several badges
 *
 * Also, it allows hiding some badges if space isn't enough
 *
 * Simple mode
 *
 * ```tsx
 * import { BadgeGroup, Badge } from 'ui-kit';
 *
 * <BadgeGroup>
 *   <Badge>Item 0</Badge>
 *   <Badge>Item 1</Badge>
 * </BadgeGroup>
 * ```
 *
 * With truncation
 *
 * ```tsx
 * import { BadgeGroup, Badge } from 'ui-kit';
 *
 * <BadgeGroup truncated moreButtonLabel="Show more tags" onMoreButtonClick={() => do.something()}>
 *   <Badge>Item 0</Badge>
 *   <Badge>Item 1</Badge>
 * </BadgeGroup>
 * ```
 */
export const BadgeGroup = function BadgeGroup(props: BadgeGroupProps) {
  const { truncated, ...restProps } = props;
  if (truncated) {
    const { className, children, onMoreButtonClick, moreButtonLabel, testId, ariaDescribedBy, ...rest } =
      restProps as TruncatedBadgeGroupProps;
    assertEmptyObject(rest);

    return (
      <TruncatedBadgeGroup
        ariaDescribedBy={ariaDescribedBy}
        className={className}
        moreButtonLabel={moreButtonLabel}
        onMoreButtonClick={onMoreButtonClick}
        testId={testId}
      >
        {children}
      </TruncatedBadgeGroup>
    );
  } else {
    const { className, children, testId, ariaDescribedBy, ...rest } = restProps as SimpleBadgeGroupProps;
    assertEmptyObject(rest);

    return (
      <SimpleBadgeGroup ariaDescribedBy={ariaDescribedBy} className={className} testId={testId}>
        {children}
      </SimpleBadgeGroup>
    );
  }
};