import { clsx } from 'clsx';
import { ReactNode } from 'react';

import {
  Size,
  Theme,
  SizeSmall,
  SizeMedium,
  SizeLarge,
  ThemeDark,
  ThemeLight,
  CommonProps,
} from '../common';
import type { BadgeAssetsProps } from '.';

/**
 * @deprecated Use `16` or `24` instead.
 */
type DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;

/**
 * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead
 */
export type BadgeProps = {
  badge: ReactNode;
  children: ReactNode;
  /**
   * `md` is deprecated, it will fallback to `sm` instead.
   * @default 'sm'
   */
  size?: DeprecatedSizes | BadgeAssetsProps['size'];
  /** @default 'light' */
  border?: ThemeDark | ThemeLight;
  'aria-label'?: string;
  style?: React.CSSProperties;
} & CommonProps;

const mapLegacySize = {
  16: Size.SMALL,
  24: Size.LARGE,
  // medium is no longer exists, so we map it to small
  [String(Size.MEDIUM)]: Size.SMALL,
};

// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.
// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.
/**
 * @deprecated Use `<AvatarView badge={..} />` instead.
 */
const Badge = ({
  badge,
  className = undefined,
  size: sizeProp = Size.SMALL,
  border = Theme.LIGHT,
  'aria-label': ariaLabel,
  children,
  style,
}: BadgeProps) => {
  const size = mapLegacySize[sizeProp] ?? sizeProp;
  const classes: string = clsx(
    'tw-badge',
    {
      [`tw-badge-border-${border}`]: border,
      [`tw-badge-${size}`]: size,
    },
    className,
  );

  return (
    <div aria-label={ariaLabel} className={classes} style={style}>
      <div className="tw-badge__children">{children}</div>
      <div className="tw-badge__content">{badge}</div>
    </div>
  );
};

export default Badge;