import * as React from 'react';

import {withInfo} from '@storybook/addon-info';
import {storyLayout} from '../../index.stories';
import {HelpPopover} from './HelpPopover';
import {PLACEMENT, SIZE, TRIGGER} from '../../constants';
import {select, withKnobs} from '@storybook/addon-knobs';
import {placementMap, triggerMap} from '../../utils/storybookEnums';

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

export const helpPopover = () => {
    return (
        <HelpPopover
            iconSize={select('iconSize', [SIZE.EXTRA_SMALL,  SIZE.SMALL, SIZE.MIDDLE, SIZE.LARGE, SIZE.EXTRA_LARGE], SIZE.MIDDLE)}
            trigger={select('trigger', triggerMap(false), TRIGGER.HOVER)}
            placement={select('placement', placementMap(false), PLACEMENT.BOTTOM)}
        >
            Help text
        </HelpPopover>
    );
};