import * as React from 'react';
import {withInfo} from '@storybook/addon-info';
import {boolean, withKnobs} from '@storybook/addon-knobs';
import {
    Button,
    CardPanel, DateRangePicker,
    IColumn, Input,
    Modal, RowActionsProps, Select,
    Table
} from './../../index';

import {storyLayout} from '../../index.stories';
import {SortEnd} from 'react-sortable-hoc';

const docGroup = {
    id: 'doc',
    Header: 'Documents'
};

const columns: Array<IColumn<any>> = [
    {
        Header: 'Last name',
        id: 'lastName',
        filter: {
            // eslint-disable-next-line react/display-name
            component: () => <Input/>,
            type: 'Input',
            applyText: 'Apply',
            cancelText: 'Cancel'
        }
    },
    {
        Header: 'First name',
        id: 'firstName'
    },
    {
        Header: 'Birthday',
        id: 'birthday',
        filter: {
            // eslint-disable-next-line react/display-name
            component: (props: any) => <DateRangePicker {...props}/>,
            type: 'DatePicker',
            applyText: 'Apply',
            cancelText: 'Cancel'
        }
    },
    {
        Header: 'Document type',
        id: 'docType',
        parent: docGroup,
        filter: {
            // eslint-disable-next-line react/display-name
            component: (props: any) => {
                return (
                    <Select
                        {...props}
                        options={[
                            {title: 'Паспорт 1', value: 'passport1'},
                            {title: 'Паспорт 2', value: 'passport2'},
                            {title: 'Паспорт 3', value: 'passport3'},
                            {title: 'Паспорт 4', value: 'passport4'},
                            {title: 'Паспорт 5', value: 'passport5'}
                        ]}
                    />
                );
            },
            type: 'Select',
            applyText: 'Apply',
            cancelText: 'Cancel'
        }
    },
    {
        Header: 'Number',
        id: 'docNumber',
        parent: docGroup
    },
    {
        Header: 'Value',
        id: 'contactValue',
        parent: {
            Header: 'Contacts',
            id: 'contacts'
        }
    }
];

const simpleColumns: Array<IColumn<any>> = [
    {
        Header: 'Last name',
        id: 'lastName'
    },
    {
        Header: 'First name',
        id: 'firstName'
    },
    {
        Header: 'Birthday',
        id: 'birthday'
    },
    {
        Header: 'Document type',
        id: 'docType'
    },
    {
        Header: 'Number',
        id: 'docNumber'
    }
];

const data = [
    {
        lastName: 'Косицин',
        firstName: 'Арс',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин2',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин3',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин4',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин5',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин6',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин7',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин8',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин9',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин10',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косици11',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин12',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    },
    {
        lastName: 'Косицин13',
        firstName: 'Арсений',
        birthday: '01.08.1986',
        docType: 'Паспорт гражданина РФ',
        docNumber: '123123',
        contactValue: '968 4562845'
    }
];

const expandedData = [
    {
        key1: 'value1',
        key2: 'value1',
        key3: 'value1'
    },
    {
        key1: 'value2',
        key2: 'value2',
        key3: 'value2'
    }
];

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

export const simpleTable = () => {
    const [sort, setSort] = React.useState<undefined | 'ASC' | 'DESC'>(undefined);
    const sortData: any = {};

    if (sort !== undefined) {
        sortData.lastName = sort;
    }

    const [tableData, changeData] = React.useState<any[]>(data);

    const onMove = (sortEnd: SortEnd) => {
        const removedItem = tableData.splice(sortEnd.oldIndex, 1)[0];

        tableData.splice(sortEnd.newIndex, 0, removedItem);

        changeData(tableData.slice());
    };

    return (
        <Table
            columns={columns}
            data={tableData}

            sortDirection={sortData}

            onSort={(key: string) => {
                if (key === 'lastName') {
                    switch (sortData.lastName) {
                        case undefined: {
                            setSort('ASC');
                            break;
                        }
                        case 'ASC': {
                            setSort('DESC');
                            break;
                        }
                        case 'DESC': {
                            setSort(undefined);
                            break;
                        }
                    }
                }
            }}

            rowActions={(props: RowActionsProps<any>) => (
                <div>
                    <Button leftIcon={'copy'} isMinimal={true} title={'Copy'}></Button>
                    <Button leftIcon={'save'} isMinimal={true} title={'Save'}></Button>
                </div>
            )}
            hasHeaderBg={boolean('hasHeaderBg', false)}
            isStriped={boolean('isStriped', false)}
            isRowsCheckable={boolean('isRowsCheckable', false)}
            isEditable={boolean('isEditable', false)}
            isRowsSelectable={boolean('isRowSelectable', false)}
            isResizable={boolean('isResizable', false)}
            isChangedAxes={boolean('isChangedAxes', false)}
            isSortable={boolean('isSortable', false)}

            onMove={onMove}
            addText={'add'}
            deleteText={'delete'}
            loadingText={'loading'}
            unsetText={'unset'}
        />
    );
};

export const fullScreenTable = () => {
    return (
        <Table<any>
            columns={columns}
            data={data}

            hasHeaderBg={true}
            isRowsCheckable={true}

            addText={'add'}
            deleteText={'delete'}
            loadingText={'loading'}
            unsetText={'unset'}
        />
    );
};

export const tableInPanel = () => {
    return (
        <div style={{width: '80%', height: '500px', margin: '20px'}}>
            <CardPanel title={'Таблица настроек'}>
                <Table
                    columns={simpleColumns}
                    data={data}

                    isStriped={true}

                    addText={'add'}
                    deleteText={'delete'}
                    loadingText={'loading'}
                    unsetText={'unset'}
                />
            </CardPanel>
        </div>
    );
};

export const tableInModal = () => {
    return (
        <Modal
            isOpen={true}
            noBodyPadding={true}
            header={'Таблица в модельном окне'}
        >
            <div style={{height: '300px'}}>
                <Table
                    columns={simpleColumns}
                    data={data}

                    hasHeaderBg={true}
                    isRowsCheckable={true}
                    isStriped={true}
                    isEditable={true}

                    addText={'add'}
                    deleteText={'delete'}
                    loadingText={'loading'}
                    unsetText={'unset'}
                />
            </div>
        </Modal>
    );
};

export const tableWithExpand = () => {
    return (
        <Table
            columns={columns}
            data={expandedData}
            // subRows={subRows}

            addText={'add'}
            deleteText={'delete'}
            loadingText={'loading'}
            unsetText={'unset'}
        />
    );
};