import * as React from 'react';
import {withInfo} from '@storybook/addon-info';
import {boolean, select, withKnobs} from '@storybook/addon-knobs';
import {DropDown} from './DropDown';
import {iconMap, placementMap} from '../../utils/storybookEnums';
import {INTENT, PLACEMENT, POPOVER_BOUNDARIES} from '../../constants';
import {storyLayout} from '../../index.stories';
import {Button} from '../button/Button';

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

export const simpleDropDown = () => {
    const [isOpen, toggleOpen] = React.useState(false);

    return (
        <>
            <DropDown
                target={(
                    <div><Button>button</Button></div>
                )}
                placement={select('placement', placementMap(true), PLACEMENT.BOTTOM_START)}
            >
                <>
                    <DropDown.Item>first</DropDown.Item>
                    <DropDown.Item isMinimal={true}>second</DropDown.Item>
                    <DropDown.Splitter/>
                    <DropDown.Item>last</DropDown.Item>
                </>
            </DropDown>
            <DropDown
                isOpen={isOpen}
                target={(
                    <div>DropDown with navigation</div>
                )}
                onVisibleChange={toggleOpen}
                placement={select('placement', placementMap(true), PLACEMENT.BOTTOM_START)}
                boundaries={POPOVER_BOUNDARIES.VIEWPORT}
                hasNavigation={true}
            >
                <DropDown.Header>Header1</DropDown.Header>
                <DropDown.Item>first</DropDown.Item>
                <DropDown.Item isMinimal={true}>second</DropDown.Item>
                <DropDown.Splitter/>
                <DropDown.Item>pre-last</DropDown.Item>
                <DropDown.Header>Header2</DropDown.Header>
                <DropDown.Item>last</DropDown.Item>
            </DropDown>
        </>
    );
};

export const dropDownItems = () => {
    const renderItem = (text: string) => {
        return (
            <DropDown.Item
                isDisabled={boolean('isDisabled', false)}
                isMinimal={boolean('isMinimal', false)}
                isReadonly={boolean('isMinimal', false)}
                isSelected={boolean('isSelected', false)}
                isHeader={boolean('isHeader', false)}
                leftIcon={select('leftIcon', iconMap(true), undefined)}
                rightIcon={select('rightIcon', iconMap(true), undefined)}
                intent={select('intent', {'default': INTENT.DEFAULT, danger: INTENT.DANGER}, INTENT.DANGER)}
            >
                {text}
            </DropDown.Item>
        );
    };

    return (
        <DropDown
            target={<div><Button>Change item styles</Button></div>}
            isOpen={true}
        >
            {renderItem('Item text 1')}
            {renderItem('Item text 2')}
            {renderItem('Item text 3')}
        </DropDown>
    );
};