import React from 'react';
import {
    boolean, number, optionsKnob, radios, text, withKnobs
} from '@storybook/addon-knobs';
import { Description, Divider, Span, Wrapper }                  from '../../..';
import { formSizes, formSizesPixels, fromSizesMap, iconColors } from '../../util/global-props';
import { Button }                                               from './button.component';

export default {
    title:      'GEENEE-UI/Button',
    component:  Button,
    decorators: [ withKnobs ]
};

export function Sizes() {
    return (
        <Wrapper>
            { fromSizesMap.map((size, key) => (
                <>
                    <Description size="xs" color="grey-6" uppercase margin="xs">
                        { size }
                        { ' ' }
                        -
                        { ' ' }
                        { formSizesPixels[ size ] }
                    </Description>
                    <Divider margin="sm" />
                    <Button
                        key={ key }
                        type="button"
                        icon={ boolean('Icon', false) ? 'apple' : undefined }
                        iconColor={ optionsKnob('IconColor', iconColors, undefined, { display: 'select' }) }
                        viewType={ radios('View type', {
                            primary:     'primary',
                            secondary:   'secondary',
                            transparent: 'transparent-black',
                            alert:       'alert'
                        }, 'primary') }
                        loading={ boolean('Loading', false) }
                        disabled={ boolean('Disabled', false) }
                        fullWidth={ boolean('FullWidth', false) }
                        rounded={ boolean('Rounded', false) }
                        align={ optionsKnob('Align', {
                            left:   'left',
                            center: 'center',
                            right:  'right'
                        }, 'center', { display: 'select' }) }
                        size={ formSizes[ size ] }
                        margin="md"
                    >
                        { text('First text', 'Play with button') }
                    </Button>
                </>
            )) }
        </Wrapper>
    );
}
export function ButtonGroup() {
    return (
        <Wrapper row fullWidth>
            <Button
                viewType="primary"
                margin="md"
                flex={ number('Flex 1', 2) }

            >
                { text('First text', 'PLAY') }
            </Button>
            <Button
                viewType="secondary"
                flex={ number('Flex 2', 1) }
            >
                { text('First text', 'PLAY') }
            </Button>
            <Button
                viewType="transparent-transparent"
                flex={ 1 }
            >
                <Span uppercase underline>GET INFO</Span>
            </Button>
        </Wrapper>
    );
}