import { Meta } from '@storybook/react-webpack5';
import { default as AvatarComponent, AvatarType } from '../avatar';
import { Size, Theme } from '../common';
import Badge, { type BadgeProps } from './Badge';

/**
 * @deprecated use **`<AvatarView badge={..} />`** components instead
 */
const meta: Meta<typeof Badge> = {
  component: Badge,
  title: 'Content/Badge',
  tags: ['deprecated'],
};

export default meta;

/**
 * Used for showing multiple components within a Canvas.
 * @decorator
 */
const withComponentGrid =
  (maxWidth = 'auto') =>
  (Story: any) => (
    <div
      style={{
        width: '100%',
        placeItems: 'center',
        justifyContent: 'center',
        display: 'flex',
        flexWrap: 'wrap',
        gap: '2rem',
        maxWidth,
      }}
    >
      <Story />
    </div>
  );

const ExampleBadgeStyle = {
  background: 'var(--color-content-positive)',
  width: '100%',
  height: '100%',
  color: 'white',
  fontSize: '10px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
};

export const LegacyAvatarWithBadge = {
  decorators: [withComponentGrid()],
  parameters: {
    docs: {
      source: { type: 'dynamic' },
    },
  },
  render: () => {
    return (
      <>
        <Badge
          badge={<div style={ExampleBadgeStyle}>B</div>}
          border={Theme.LIGHT}
          size={Size.LARGE}
        >
          <AvatarComponent type={AvatarType.INITIALS} size={Size.LARGE}>
            AA
          </AvatarComponent>
        </Badge>

        <Badge
          badge={<div style={ExampleBadgeStyle}>B</div>}
          border={Theme.LIGHT}
          size={Size.MEDIUM}
        >
          <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
            AA
          </AvatarComponent>
        </Badge>

        <Badge
          badge={<div style={ExampleBadgeStyle}>B</div>}
          border={Theme.LIGHT}
          size={Size.SMALL}
        >
          <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
            AA
          </AvatarComponent>
        </Badge>
      </>
    );
  },
};