import React, { useState }                                      from 'react';
import { boolean, optionsKnob, text, withKnobs }                from '@storybook/addon-knobs';
import { Description, Divider, Title, Wrapper }                 from '../../..';
import { formSizes, formSizesPixels, fromSizesMap, iconColors } from '../../util/global-props';
import { Input }                                                from './input.component';

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


export const _Input = () => {
    const [ value, setValue ] = useState<string | typeof undefined>(undefined);
    const handlerClear = () => {
        setValue('');
    };
    const handlerChange = ({ target }: { target: HTMLInputElement }) => {
        setValue(target.value);
    };

    return (
        <Wrapper>
            <Title margin="lg" size="lg"> Input </Title>
            { fromSizesMap.map((size, key) => (
                <React.Fragment key={ key }>
                    <Description size="xs" color="grey-6" uppercase margin="xs">
                        { `${ size } - ${ formSizesPixels[ size ] }` }
                    </Description>
                    <Divider margin="sm" />
                    <Input
                        key={ key }
                        size={ formSizes[ size ] }
                        value={ value }
                        placeholder={ text('Placeholder', 'Test value') }
                        onChange={ handlerChange }
                        onClear={ handlerClear }
                        icon={ boolean('Icon', false) ? 'mail' : undefined }
                        iconColor={ optionsKnob('IconColor', iconColors, undefined, { display: 'select' }) }
                        clearable={ boolean('Clearable', false) }
                        transparent={ boolean('Transparent', false) }
                        margin="md"
                        after={ (<Description color="grey-6" size="xs" uppercase>{ text('After text', '') }</Description>) }
                        before={ (<Description color="grey-6">{ text('Before text', '') }</Description>) }
                    />
                </React.Fragment>
            )) }
        </Wrapper>
    );
};