import React, { useState }              from 'react';
import { optionsKnob, text, withKnobs } from '@storybook/addon-knobs';
import { Button, Input, Wrapper }       from '../../..';
import { sizes }                        from '../../util/global-props';
import { FormItem }                     from './form-item.component';

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

export const FormItemStory = () => {
    const [ loginFocused, setLoginFocused ] = useState(false);
    const [ passwordFocused, setPasswordFocused ] = useState(false);
    return (
        <Wrapper align="center">
            <Wrapper padding="xxl" style={ { backgroundColor: 'rgba(255, 255, 255, 0.29)', boxShadow: 'rgba(255, 255, 255, 0.29)' } } maxWidth="300px">
                <FormItem
                    label="Email"
                    error={ text('Email error', 'Field is required') }
                    focused={ loginFocused }
                    margin={ optionsKnob('Margin', sizes, undefined, { display: 'select' }) }
                >
                    <Input
                        transparent
                        onFocus={ () => setLoginFocused(true) }
                        onBlur={ () => setLoginFocused(false) }
                    />
                </FormItem>
                <FormItem
                    label="Password"
                    error={ text('Password error', 'Field is required') }
                    focused={ passwordFocused }
                    margin={ optionsKnob('Margin', sizes, undefined, { display: 'select' }) }
                >
                    <Input
                        transparent
                        type="password"
                        onFocus={ () => setPasswordFocused(true) }
                        onBlur={ () => setPasswordFocused(false) }
                    />
                </FormItem>
                <Button fullWidth>Login</Button>
            </Wrapper>
        </Wrapper>
    );
};