import React                                     from 'react';
import { boolean, optionsKnob, text, withKnobs } from '@storybook/addon-knobs';
import { Description, Divider, Switch, Wrapper } from '../../..';
import { OptionsKnobRecord }                     from '../../util/knobs';
import { Tag, TagPropsType }                     from './tag.component';


export default {
    title:      'GEENEE-UI/Tag',
    component:  Switch,
    decorators: [ withKnobs ]
};
const tagColors: OptionsKnobRecord<TagPropsType['color']> = {
    default: undefined,
    key:     'key',
    violet:  'violet',
    blue:    'blue',
    green:   'green',
    yellow:  'yellow',
    red:     'red',
    grey:    'grey'
};
const tagColorsMap = Object.keys(tagColors);

const tagSizes: OptionsKnobRecord<TagPropsType['size']> = {
    default: undefined,
    xs:      'xs',
    sm:      'sm',
    md:      'md',
    lg:      'lg'
};
const tagSizesMap = Object.keys(tagSizes);

export const Playground = () => (
    <Wrapper>
        <Tag
            color={ optionsKnob('Color', tagColors, undefined, { display: 'select' }) }
            size={ optionsKnob('Size', tagSizes, undefined, { display: 'select' }) }
            arrow={ boolean('Dropdown Arrow', false) }
            dot={ boolean('Dot', false) }
        >
            { text('label', 'tag') }
        </Tag>
    </Wrapper>
);
export const Colors = () => (
    <Wrapper>
        { tagColorsMap.map((item, index) => (
            <Wrapper key={ index } margin="md">
                <Description size="xs" color="grey-6" uppercase margin="xs">
                    { item }
                </Description>
                <Divider margin="sm" />
                <Tag
                    color={ tagColors[ item as keyof TagPropsType['color'] ] }
                    size={ optionsKnob('Size', tagSizes, undefined, { display: 'select' }) }
                    arrow={ boolean('Dropdown Arrow', false) }
                    dot={ boolean('Dot', false) }
                >
                    { text('label', 'tag') }
                </Tag>
            </Wrapper>
        )) }

    </Wrapper>
);
export const Sizes = () => (
    <Wrapper>
        { tagSizesMap.map((item, index) => (
            <Wrapper key={ index } margin="md">
                <Description size="xs" color="grey-6" uppercase margin="xs">
                    { item }
                </Description>
                <Divider margin="sm" />
                <Tag
                    color={ optionsKnob('Color', tagColors, undefined, { display: 'select' }) }
                    size={ tagSizes[ item as keyof TagPropsType['color'] ] }
                    arrow={ boolean('Dropdown Arrow', false) }
                    dot={ boolean('Dot', false) }
                >
                    { text('label', 'tag') }
                </Tag>
            </Wrapper>
        )) }

    </Wrapper>
);