import React                             from 'react';
import { optionsKnob, text, withKnobs }  from '@storybook/addon-knobs';
import { Description, Divider, Wrapper } from '../../..';
import { textColors }                    from '../../util/global-props';
import { OptionsKnobRecord }             from '../../util/knobs';
import { Title, TitlePropsType }         from './title.component';

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

const titleSize: OptionsKnobRecord<TitlePropsType['size']> = {
    default: undefined,
    xxl:     'xxl',
    xl:      'xl',
    lg:      'lg',
    md:      'md',
    sm:      'sm',
    xs:      'xs',
    xxs:      'xxs'
};
const titleSizes = Object.keys(titleSize) as TitlePropsType['size'][];

const titleAlign: OptionsKnobRecord<TitlePropsType['align']> = {
    default: undefined,
    left:    'left',
    center:  'center',
    right:   'right'
};

const titleWeight: OptionsKnobRecord<TitlePropsType['weight']> = {
    default: undefined,
    bold:    'bold',
    regular: 'regular'
};
const titleColor: OptionsKnobRecord<TitlePropsType['color']> = {
    default: undefined,
    ...textColors
};

export const _Title = () => (
    <Wrapper>
        <Title margin="lg" size="lg"> Title </Title>
        { titleSizes.map((size, index) => (
            <Wrapper key={ index }>
                <Description size="xs" color="grey-6" margin="xxs" uppercase>{ size }</Description>
                <Divider margin="xs" />
                <Title
                    size={ size }
                    align={ optionsKnob('01. Align', titleAlign, undefined, { display: 'select' }) }
                    weight={ optionsKnob('02. Weight', titleWeight, undefined, { display: 'select' }) }
                    color={ optionsKnob('03. Color', titleColor, undefined, { display: 'select' }) }
                    margin="md"
                >
                    { text('04. Text', 'Some example text here') }
                </Title>
            </Wrapper>
        )) }
    </Wrapper>
);