import { text, select } from '@storybook/addon-knobs';

import { default as AvatarComponent, AvatarType } from '../avatar';
import { Size, Theme } from '../common';

import Badge from './Badge';

export default {
  component: Badge,
  title: 'Content/Badge',
  excludeStories: ['ExampleBadgeCss'],
};

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

export const Avatar = () => {
  const BadgeText = text('BadgeText', 'B');
  const border = select('Border', [undefined, Theme.LIGHT, Theme.DARK], Theme.LIGHT);

  return (
    <div>
      <div style={{ display: 'inline', margin: 8 }}>
        <Badge
          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
          border={border}
          size={Size.LARGE}
        >
          <AvatarComponent type={AvatarType.INITIALS} size={Size.LARGE}>
            AA
          </AvatarComponent>
        </Badge>
      </div>

      <div style={{ display: 'inline', margin: 8 }}>
        <Badge
          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
          border={border}
          size={Size.MEDIUM}
        >
          <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
            AA
          </AvatarComponent>
        </Badge>
      </div>

      <div style={{ display: 'inline', margin: 8 }}>
        <Badge
          badge={<div style={ExampleBadgeCss}>{BadgeText}</div>}
          border={border}
          size={Size.SMALL}
        >
          <AvatarComponent type={AvatarType.INITIALS} size={Size.MEDIUM}>
            AA
          </AvatarComponent>
        </Badge>
      </div>
    </div>
  );
};
