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

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

// @ts-ignore
const descriptionSize: OptionsKnobRecord<DescriptionPropsType['size']> = {
    default: undefined,
    xs:      'xs',
    sm:      'sm',
    md:      'md',
    lg:      'lg',
    xl:      'xl'
};
const descriptionSizes = Object.keys(descriptionSize) as DescriptionPropsType['size'][];

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

// @ts-ignore
const descriptionWeight: OptionsKnobRecord<DescriptionPropsType['weight']> = {
    default: undefined,
    bold:    'bold',
    normal:  'normal'
};
const descriptionColor: OptionsKnobRecord<TitlePropsType['color']> = {
    default: undefined,
    ...textColors
};

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