import React                                        from 'react';
import { action }                                   from '@storybook/addon-actions';
import { boolean, text, withKnobs }                 from '@storybook/addon-knobs';
import { Description, Divider, Wrapper }            from '../../..';
import { formSizes, formSizesPixels, fromSizesMap } from '../../util/global-props';
import { Select }                                   from './select.component';

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

const data = (length: number) => (
    Array.from({ length }, (item, index) => ({
        value: `test${ index }`,
        label: `test${ index }`
    }))
);

export const _Select = () => (
    <Wrapper>
        { fromSizesMap.map((size, key) => (
            <>
                <Description size="xs" color="grey-6" uppercase margin="xs">
                    { size }
                    { ' - ' }
                    { formSizesPixels[ size ] }
                </Description>
                <Divider margin="sm" />
                <Select
                    key={ key }
                    size={ formSizes[ size ] }
                    placeholder={ text('Placeholder', 'Custom placeholder') }
                    isSearchable={ boolean('isSearchable', true) }
                    transparent={ boolean('Transparent', false) }
                    title={ text('Title', '') }
                    options={ data(5) }
                    onChange={ action('value-changed') }
                    margin="md"
                />
            </>
        )) }

    </Wrapper>
);