import React                       from 'react';
import { number, text, withKnobs } from '@storybook/addon-knobs';
import { Icon }                    from '../../..';
import { MenuItem }                from './menu-item.component';
import { Menu }                    from './menu.component';

export default {
    title:      'GEENEE-UI/Menu',
    component:  Menu,
    decorators: [ withKnobs ]
};

export const Playground = () => {
    const menuItemsCount = number('MenuItemsCount', 5);

    const itemDisabledId = text('Disabled item', '2');
    const itemBoldId = text('Bold item', '4');

    const [ activeItem, setActiveItem ] = React.useState('0');

    const handleChange = (_event: React.SyntheticEvent, menuItemId: string) => {
        setActiveItem(menuItemId);
    };

    return (
        <div className="story-wrapper">
            <div className="story-element">
                <Menu onSelect={ handleChange } activeItemId={ activeItem }>
                    { Array.from({ length: menuItemsCount }, (_item, index) => (
                        <MenuItem
                            label={ `MenuItem ${ index }` }
                            iconBefore={ <Icon name="check" /> }
                            id={ `${ index }` }
                            weight={ itemBoldId === `${ index }` ? 'bold' : undefined }
                            disabled={ itemDisabledId === `${ index }` }
                        />
                    )) }
                </Menu>
            </div>
        </div>
    );
};

export const MinimalExampleWithIcons = () => {
    const [ activeItem, setActiveItem ] = React.useState('0');

    const handleChange = (_event: React.SyntheticEvent, menuItemId: string) => {
        setActiveItem(menuItemId);
    };

    return (
        <div className="story-wrapper">
            <div className="story-element">
                <Menu onSelect={ handleChange } activeItemId={ activeItem }>
                    { Array.from({ length: 4 }, (_item, index) => (
                        <MenuItem
                            label={ `MenuItem ${ index }` }
                            id={ `${ index }` }
                        />
                    )) }
                </Menu>
            </div>
            <div className="story-element">
                <Menu onSelect={ handleChange } activeItemId={ activeItem }>
                    { Array.from({ length: 4 }, (_item, index) => (
                        <MenuItem
                            label={ `MenuItem ${ index }` }
                            iconBefore={ <Icon name="check" /> }
                            id={ `${ index }` }
                        />
                    )) }
                </Menu>
            </div>
            <div className="story-element">
                <Menu onSelect={ handleChange } activeItemId={ activeItem }>
                    { Array.from({ length: 4 }, (_item, index) => (
                        <MenuItem
                            label={ `MenuItem ${ index }` }
                            iconAfter={ <Icon name="dots" /> }
                            id={ `${ index }` }
                        />
                    )) }
                </Menu>
            </div>
        </div>
    );
};