import React                               from 'react';
import { boolean, optionsKnob, withKnobs } from '@storybook/addon-knobs';
import { Description, Wrapper }            from '../../..';
import { sizes }                           from '../../util/global-props';
import { OptionsKnobRecord }               from '../../util/knobs';
import { Button }                          from '../button/button.component';
import { Divider, DividerPropsType }       from './divider.component';

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

const colors: OptionsKnobRecord<DividerPropsType['color']> = {
    default:  undefined,
    grey:     'grey',
    'grey-2': 'grey-2',
    'grey-3': 'grey-3'
};
const margins: OptionsKnobRecord<DividerPropsType['margin']> = {
    default: undefined,
    ...sizes
};


export const Playground = () => (
    <Wrapper row={ boolean('Wrapper row direction', false) } valign="center">
        <Description
            margin={ optionsKnob('Margin', margins, 'md', { display: 'select' }) }
        >
            Some text
        </Description>
        <Divider
            color={ optionsKnob('Color', colors, undefined, { display: 'select' }) }
            margin={ optionsKnob('Margin', margins, 'md', { display: 'select' }) }
            transparent={ boolean('Transparent', false) }
        />
        <Description
            margin={ optionsKnob('Margin', margins, 'md', { display: 'select' }) }
        >
            Some text
        </Description>
        <Divider
            color={ optionsKnob('Color', colors, undefined, { display: 'select' }) }
            margin={ optionsKnob('Margin', margins, 'md', { display: 'select' }) }
            transparent={ boolean('Transparent', false) }
        />
        <Description
            margin={ optionsKnob('Margin', margins, 'md', { display: 'select' }) }
        >
            Some text
        </Description>
        <Divider
            color={ optionsKnob('Color', colors, undefined, { display: 'select' }) }
            margin={ optionsKnob('Margin', margins, 'md', { display: 'select' }) }
            transparent={ boolean('Transparent', false) }
        />
        <Button>Text</Button>
    </Wrapper>
);