import {withInfo} from '@storybook/addon-info';
import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
import * as React from 'react';
import {storyLayout} from '../../index.stories';
import {groupTypeMap} from '../../utils/storybookEnums';
import {Button, CardPanel, Field, GROUP_TYPE, Icon, SIZE} from './../../index';

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

export const simpleCardPanel = () => {

    return (
        <CardPanel
            title={text('title', 'Card title')}
            internal={boolean('internal', false)}
            isCollapsed={boolean('isCollapsed', false)}
            hideOverflow={boolean('scrollY', false)}
            noBodyPadding={boolean('noBodyPadding', false)}
            rightExtraItems={(
                <>
                    <Button size={SIZE.SMALL} leftIcon={'setting'}/>
                    <Button size={SIZE.SMALL} leftIcon={'plus-circle'} isMinimal={true}>some text</Button>
                </>
            )}
            leftExtraItems={(<Icon name={'plus-circle'}/>)}
        >
            body - list of data
        </CardPanel>
    );
};

export const cardPanelWidthFields = () => {

    return (
        <CardPanel
            title={text('title', 'Card title')}
            internal={boolean('internal', false)}
            isCollapsed={boolean('isCollapsed', false)}
            hideOverflow={boolean('scrollY', false)}
            noBodyPadding={boolean('noBodyPadding', false)}
            rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
        >
            <Field.Input label={'field1'} onChange={() => null}/>
            <Field.Input label={'field2'} onChange={() => null}/>
            <Field.Input label={'field3'} onChange={() => null}/>
            <Field.Input label={'field4'} onChange={() => null}/>
        </CardPanel>
    );
};

/**
 * ===============================================
 */

const CardPanelContentDQ = () => {
    return (
        <>
            <CardPanel internal={true} title={'inner 1'} contentAutoHeight={true}>
                <Field.Input label={'field1'} onChange={() => null}/>
                <Field.Input label={'field2 with lon string bla bla bla'} onChange={() => null}/>
                <Field.Input label={'field3'} onChange={() => null}/>
                <Field.Input label={'field4'} sublabel={'sublabel lsdlakdl'} onChange={() => null}/>
                <Field.Input label={'field5'} onChange={() => null}/>
                <Field.Input label={'field6 aslhl asldhasl dhasld aslhdh als sajkask kashdsa khd kasdah '} onChange={() => null}/>
                <Field.Input label={'field7'} onChange={() => null}/>
                <Field.Input label={'field8'} onChange={() => null}/>
                <Field.Input label={'field9'} onChange={() => null}/>
            </CardPanel>

            <CardPanel internal={true} title={'inner 2'} contentAutoHeight={true}>
                <Field.Input label={'field1'} onChange={() => null}/>
                <Field.Input label={'field2'} onChange={() => null}/>
                <Field.Input label={'field3'} onChange={() => null}/>
                <Field.Input label={'field4'} onChange={() => null}/>
            </CardPanel>
            <CardPanel internal={true} title={'inner 3'} contentAutoHeight={true}>
                <Field.Input label={'field1'} onChange={() => null}/>
            </CardPanel>
        </>
    );
};

export const cardPanelWithPanelsRowWrap = () => {
    return (
        <CardPanel
            title={text('title', 'Card title')}
            flexDirection={select('flexDirection', {
                row: 'row',
                'row-wrap': 'row-wrap',
                'row-resizable': 'row-resizable',
                column: 'column'
            }, 'row-wrap')}
            noBodyPadding={boolean('noBodyPadding', true)}
            contentAutoHeight={boolean('contentAutoHeight', true)}
        >
            <CardPanelContentDQ/>
        </CardPanel>
    );
};

export const cardPanelGroup = () => {
    return (
        <CardPanel.Group groupType={select('groupType', groupTypeMap(false), GROUP_TYPE.HORIZONTAL)}>
            <CardPanel
                title={text('title', 'Card title1')}
                internal={boolean('internal', false)}
                isCollapsed={boolean('isCollapsed', false)}
                hideOverflow={boolean('scrollY', false)}
                noBodyPadding={boolean('noBodyPadding', false)}
                rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
            >
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
            </CardPanel>
            <CardPanel
                title={text('title2', 'Card title2')}
                internal={boolean('internal', false)}
                isCollapsed={boolean('isCollapsed', false)}
                hideOverflow={boolean('scrollY', false)}
                noBodyPadding={boolean('noBodyPadding', false)}
                rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
            >
                <div>body - list of data</div>
                <div>body - list of data</div>
            </CardPanel>
            <CardPanel
                title={text('title3', 'Card title3')}
                internal={boolean('internal', false)}
                isCollapsed={boolean('isCollapsed', false)}
                hideOverflow={boolean('scrollY', false)}
                noBodyPadding={boolean('noBodyPadding', false)}
                rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
            >
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
                <div>body - list of data</div>
            </CardPanel>
        </CardPanel.Group>
    );
};

export const cardPanelGrid = () => {
    return (
        <CardPanel.Grid>
            <React.Fragment
                data-grid={{
                i: 'firstBlock',
                x: 0,
                y: 0,
                w: 6,
                h: 5,
                minW: 3
            }}>
                <CardPanel
                    title={text('title', 'Card title1')}
                    internal={boolean('internal', false)}
                    isCollapsed={boolean('isCollapsed', false)}
                    hideOverflow={boolean('scrollY', false)}
                    noBodyPadding={boolean('noBodyPadding', false)}
                    rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
                >
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                </CardPanel>
            </React.Fragment>
            <React.Fragment
                data-grid={{
                i: 'secondBlock',
                x: 6,
                y: 0,
                w: 6,
                h: 2,
                minW: 3
            }}>
                <CardPanel
                    title={text('title2', 'Card title2')}
                    internal={boolean('internal', false)}
                    isCollapsed={boolean('isCollapsed', false)}
                    hideOverflow={boolean('scrollY', false)}
                    noBodyPadding={boolean('noBodyPadding', false)}
                    rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
                >
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                </CardPanel>
            </React.Fragment>
            <React.Fragment
                data-grid={{
                i: 'thirdBlock',
                x: 6,
                y: 2,
                w: 6,
                h: 2,
                minW: 3
            }}>
                <CardPanel
                    title={text('title3', 'Card title3')}
                    internal={boolean('internal', false)}
                    isCollapsed={boolean('isCollapsed', false)}
                    hideOverflow={boolean('scrollY', false)}
                    noBodyPadding={boolean('noBodyPadding', false)}
                    rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
                >
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                    <div>body - list of data</div>
                </CardPanel>
            </React.Fragment>
            <React.Fragment
                data-grid={{
                i: 'forthBlock',
                x: 0,
                y: 5,
                w: 6,
                h: 2,
                minW: 3
            }}>
                <CardPanel
                    title={text('title4', 'Card title4')}
                    internal={boolean('internal', false)}
                    isCollapsed={boolean('isCollapsed', false)}
                    hideOverflow={boolean('scrollY', false)}
                    noBodyPadding={boolean('noBodyPadding', false)}
                    rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
                >
                    body - list of data
                </CardPanel>
            </React.Fragment>
            <React.Fragment
                data-grid={{
                i: 'forthBlock',
                x: 6,
                y: 5,
                w: 6,
                h: 2,
                minW: 3
            }}>
                <CardPanel
                    title={text('title5', 'Card title5')}
                    internal={boolean('internal', false)}
                    isCollapsed={boolean('isCollapsed', false)}
                    hideOverflow={boolean('scrollY', false)}
                    noBodyPadding={boolean('noBodyPadding', false)}
                    rightExtraItems={(<Button leftIcon={'plus-circle'}/>)}
                >
                    body - list of data
                </CardPanel>
            </React.Fragment>
        </CardPanel.Grid>
    );
};