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

import {Title} from '../../Components/Title/src';
import {TYPES} from '../../Components/Title/src/types';
import Badge from '../../Components/Badge/src';
import {BADGE_TYPE} from '../../Components/Badge/src/types';
import {Star, COLOR, SIZE} from '../../Components/Icon/src';

const platinum = {
  color: 'white',
  background: 'linear-gradient(258deg, #bfbfbf, #383649)',
};

const bubble = {
  color: 'black',
  background: '#1eb4be3b',
  'border-radius': '16px',
  'text-transform': 'initial',
  'font-size': '12px',
  'min-height': '20px',
  'padding-top': '1px',
  'padding-left': '8px',
  'padding-right': '8px',
  'line-height': '23px',
};

const pink = {
  color: 'black',
  background: 'pink',
};

export default storiesOf('Components | Badge', module)
  .add('Default', () => (
    <>
      <Title type={TYPES.H3}>Default types + custom styles</Title>
      <p>
        {Object.values(BADGE_TYPE)
          .map((badgeType) => (
            <span style={{marginRight: 10}} key={badgeType}>
              <Badge
                label={badgeType}
                type={badgeType}
              />
            </span>
          ))}

        <span style={{marginRight: 10}}>
          +
        </span>

        <span style={{marginRight: 10}}>
          <Badge
            label="Platinum"
            customStyle={platinum}
          />
        </span>
        <span style={{marginRight: 10}}>
          <Badge
            label="Pink"
            customStyle={pink}
          />
        </span>
        <span>
          <Badge
            label="Bubble"
            customStyle={bubble}
          />
        </span>
      </p>
    </>
  ))
  .add('With icon', () => (
    <Badge
      label={text('Label', 'Im badge')}
      icon={<Star color={COLOR.WHITE} size={SIZE.SMALL} />}
      type={select('Type', Object.values(BADGE_TYPE), BADGE_TYPE.INFO)}
    />
  ));