import React, { useState }                               from 'react';
import { boolean, number, optionsKnob, text, withKnobs } from '@storybook/addon-knobs';
import { formSizes }                                     from '../../util/global-props';
import { Wrapper }                                       from '../wrapper/wrapper.component';
import { TextArea }                                      from './textarea.component';

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

export const _TextArea = () => {
    const defaultValue = 'Connect to 1600+ banks using our secure bank connection to automate your savings.\n'
        + '\n'
        + '2\n'
        + 'Pick your assets\n'
        + '\n'
        + 'Invest in Bitcoin on the regular or save with one of the highest interest rates on the market.';
    const [ value, setValue ] = useState<string | typeof undefined>(defaultValue);
    const handlerChange = ({ target }: { target: HTMLTextAreaElement }) => {
        setValue(target.value);
    };

    return (
        <Wrapper>
            <TextArea
                value={ value }
                placeholder={ text('Placeholder', 'type here..') }
                size={ optionsKnob('Size', formSizes, undefined, { display: 'select' }) }
                onChange={ handlerChange }
                transparent={ boolean('Transparent', false) }
                autoSize={ boolean('Autosize', true) }
                minRows={ number('Min rows', 2) }
                maxRows={ number('Max rows', 0) }
            />
        </Wrapper>
    );
};