import React, { useState }          from 'react';
import { withKnobs }                from '@storybook/addon-knobs';
import { FormItem, Input, Wrapper } from '../../..';
import { InputTableItem }           from './input-table-item.component';
import { InputTable }               from './input-table.component';

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

export const InputTableStory = () => {
    const [ firstNameFocused, setFirstNameFocused ] = useState(false);
    return (

        <Wrapper maxWidth="680px">
            <InputTable title="Valera's form">
                <InputTableItem label="First Name">
                    <FormItem
                        focused={ firstNameFocused }
                        error="Какого хера?"
                    >
                        <Input
                            size="sm"
                            value="Валера"
                            onFocus={ () => setFirstNameFocused(true) }
                            onBlur={ () => setFirstNameFocused(false) }
                            transparent
                        />
                    </FormItem>
                </InputTableItem>
                <InputTableItem label="Last Name">
                    <FormItem>
                        <Input
                            size="sm"
                            transparent
                        />
                    </FormItem>
                </InputTableItem>

            </InputTable>
        </Wrapper>

    );
};