import * as React from 'react';
import {Field} from './index';

import {boolean, select, text, withKnobs, number} from '@storybook/addon-knobs';
import {withInfo} from '@storybook/addon-info';
import {storyLayout} from '../../index.stories';
import {FIELD_MODE, INTENT, SIZE} from '../../constants';
import {Button} from '../../component';
import {fieldModeMap} from '../../utils/storybookEnums';

// eslint-disable-next-line no-restricted-syntax
export default {
    title: 'Field',
    decorators: [withInfo, withKnobs, storyLayout]
};

export const fields = () => {
    return (
        <React.Fragment>
            label {<Field label={'Label'} sublabel={'SubLabel'}>INPUT</Field>}
            <br/>
            input {<Field.Input
                label={'Label'}
                sublabel={'SubLabelsublabelsublabelaslsfldskfksdfkdlkfnalhflahbflsadfhadlksfhbl'}
                disabled={false}
                onChange={(name: any, value: any) => {console.log(name, value);}}
                error={'some error text'}
            />}
            <br/>
            select {<Field.Select
                name={'select'}
                label={'SubLabelsublabelsublabe laslsfldskfksdfkdlkfnalhflahbflsadfhadlksfhbl'}
                sublabel={'SubLabelsublabelsublabelaslsfldskfksdfkdlkfnalhflahbflsadfhadlksfhbl'}
                isDisabled={false}
                options={[]}
                onSelect={(name: any, value: any) => {console.log(name, value);}}
            />}
            <br/>
            checkbox {<Field.Checkbox
                label={'SubLabelsublabelsublabelaslsfldskfksdfkdlkfnalhflahbflsadfhadlksfhbl'}
                sublabel={'SubLabelsublabelsublabelaslsfldskfksdfkdlkfnalhflahbflsadfhadlksfhbl'}
                disabled={false}
                onChange={(name: any, value: any) => {console.log(name, value);}}
            />}
            <br/>
            switch {<Field.Switcher
                name={'switcher'}
                label={'Label'}
                sublabel={'SubLabel'}
                disabled={false}
                onChange={(name: any, value: any) => {console.log(name, value);}}
            />}
            <br/>
            <div style={{width: '900px', border: '1px solid gray', padding: '10px'}}>
                <Field.Input
                    onChange={() => {}}
                    label={text('label', 'fieldLabel')}
                    sublabel={text('sublabel', 'fieldSubabel')}
                    error={text('error', '')}
                    labelWidth={number('labelWidth', 40)}
                    inputWidth={number('inputWidth', 60)}
                    isMultiLine={boolean('isMultiLine', false)}
                    viewMode={select('size', fieldModeMap(true), FIELD_MODE.COLUMNS_ALIGN_LEFT)}
                    isRequired={boolean('isRequired', false)}
                    prefix={text('prefix', '')}
                    isWide={boolean('isWide', false)}
                    rightExtraItems={(
                        <Button
                            onClick={() => {}}
                            isMinimal={true}
                            intent={INTENT.PRIMARY}
                            size={SIZE.SMALL}
                        >
                            extended search
                        </Button>
                    )}
                />
            </div>
        </React.Fragment>
    );
};