import * as React from 'react';
import {IOption, ITreeNode, SelectTree, SIZE, TreeUtil} from './../../index';

import {withInfo} from '@storybook/addon-info';
import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
import {storyLayout} from '../../index.stories';
import {OptionList} from '../option_list/OptionList';
import {Select} from './Select';
import {Value} from './Select.types';
import {iconMap, sizeMap} from '../../utils/storybookEnums';

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

const options = (): IOption[] => {
    return [
        {title: 'short', value: 'value1'},
        {title: 'long', value: 'value2'},
        {title: 'o', value: 'value3'},
        {title: 'very long', value: 'value4'},
        {title: 'very very long very very very very veyr veyvry veyv ey eyv eyv rv eyv eyv ryv eyv ey', value: 'value5'},
        {title: 'a1', value: 'value6'},
        {title: 'b2', value: 'value7'}
    ];
};

export const optionList = () => {
    return (
        <OptionList
            forwardRef={React.createRef()}
            options={[
                {title: 'title1', value: 'value1'},
                {title: 'title2', value: 'value2'}
            ]}
            onSelect={() => {}}
        />
    );
};

export const simpleSelect = () => {
    const [value, setValue]: [Value, any] = React.useState(['1', '2', '3', '4']);
    const [isAllSelected, setIsAllSelected]: [boolean, any] = React.useState(false);

    return (
        <div style={{width: '160px'}}>
            <Select
                value={value}
                isDisabled={boolean('isDisabled', false)}
                isReadOnly={boolean('isReadOnly', false)}
                showSearch={boolean('showSearch', true)}
                showArrow={boolean('showArrow', true)}
                allowClear={boolean('allowClear', true)}
                isWaiting={boolean('isWaiting', false)}
                canSelectAll={boolean('canSelectAll', false)}
                isAllSelected={isAllSelected}
                onSelectAll={() => {
                    setIsAllSelected(true);
                    setValue(options().map((option) => option.value));
                }}
                onDeselectAll={() => {
                    setIsAllSelected(false);
                    setValue([]);
                }}
                mode={select('Mode', {
                    'default': 'default',
                    multiple: 'multiple'
                }, 'default')}
                prefix={select('prefix', iconMap(false), 'puzzle')}
                suffix={select('suffix', iconMap(false), 'puzzle')}
                options={options()}
                size={select('size', sizeMap(true), SIZE.MIDDLE)}
                placeholder={'Select something..'}
                title={text('title', 'Simple title')}
                onChange={(options: Value) => {setValue(options);}}
                hasError={boolean('hasError', false)}
                errorMessage={text('errorMessage', 'Simple Error')}
                dropdownMatchSelectWidth={select('dropdownMatchSelectWidth', {
                    matchSelect: undefined,
                    autoContent: 'autoContent',
                    '1.5:1': '1.5:1'
                }, undefined)}
            />
        </div>
    );
};

const columns = [{
    displayName: '',
    name: 'displayName'
}];

const initNodes: ITreeNode[] = [
    {
        key: '1',
        row: {displayName: 'node 1'},
        expanded: false,
        children: null
    },
    {
        key: '2',
        row: {displayName: 'node 2'},
        expanded: false,
        children: [{
            key: '2.1',
            row: {displayName: 'node 2-1'},
            expanded: false,
            children: null
        }]
    },
    {
        key: '3',
        row: {displayName: 'node 3 with long long long name'},
        expanded: false,
        children: null
    },
    {
        key: '4',
        row: {displayName: 'node 4'},
        expanded: false,
        children: null
    }
];

initNodes.forEach((node) => {
    TreeUtil.initParents(node, true);
});

export const selectTree = () => {
    const [value, setValue]: [ITreeNode[], any] = React.useState([]);
    const options = value.map((v) => ({value: v.key, title: v.row.displayName}));

    return (
        <div>
            <SelectTree
                value={value.map((v) => v.key)}
                options={options}
                onSelectNode={(node) => {
                    if (node.children !== null) {
                        return true;
                    }

                    setValue(value.concat(node));

                    return value.length < 2 ? true : undefined;
                }}
                mode={'multiple'}
                columns={columns}
                nodes={initNodes}
            />
        </div>
    );
};