import { useState, useMemo, useEffect } from 'react';
import { Avatar, Button, Flex, MenuButton, menuHelpers } from '@pega/cosmos-react-core';
export default {
    title: 'Core/MenuButton',
    component: MenuButton,
    args: {
        variant: 'secondary',
        showIcon: true,
        iconOnly: false,
        showArrow: false,
        showItemVisual: true,
        showItemSecondary: true,
        showItemCount: true
    },
    argTypes: {
        text: { control: { type: 'text' } },
        variant: {
            options: ['primary', 'secondary', 'simple', 'link', 'text'],
            control: { type: 'select' }
        },
        showIcon: { control: { type: 'boolean' } },
        iconOnly: { control: { type: 'boolean' } },
        showArrow: {
            control: { type: 'boolean' },
            if: { arg: 'iconOnly', truthy: true }
        },
        showItemVisual: { control: { type: 'boolean' } },
        showItemSecondary: { control: { type: 'boolean' } },
        showItemCount: { control: { type: 'boolean' } }
    }
};
export const MenuButtonAction = (args) => {
    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
        return {
            id: `${i}`,
            primary: `Item ${i + 1}`,
            secondary: ['Meta A', 'Meta B', 'Meta C'],
            items: i === 2 ? [{ id: 'sub', primary: 'SubItem' }] : undefined
        };
    }));
    const itemsToRender = useMemo(() => {
        return menuHelpers.mapTree(items, item => {
            return {
                ...item,
                visual: args.showItemVisual ? <Avatar name={item.primary}/> : undefined,
                secondary: args.showItemSecondary ? item.secondary : undefined
            };
        });
    }, [items, args.showItemVisual, args.showItemSecondary]);
    useEffect(() => {
        setItems(cur => {
            return menuHelpers.mapTree(cur, item => {
                return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };
            });
        });
    }, [args.showItemCount]);
    return (<MenuButton text={args.text} variant={args.variant} icon={args.showIcon ? 'user-list-solid' : undefined} iconOnly={args.iconOnly} showArrow={args.showArrow} menu={{
            mode: 'action',
            items: itemsToRender,
            onItemClick: () => { }
        }}/>);
};
MenuButtonAction.args = {
    text: 'Actions'
};
export const MenuButtonSingleSelect = (args) => {
    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
        return {
            id: `${i}`,
            primary: `Item ${i + 1}`,
            secondary: ['Meta A', 'Meta B', 'Meta C'],
            selected: false
        };
    }));
    const handleMenuItemClick = (id) => {
        setItems(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
    };
    const itemsToRender = useMemo(() => {
        return menuHelpers.mapTree(items, item => {
            return {
                ...item,
                visual: args.showItemVisual ? <Avatar name={item.primary}/> : undefined,
                secondary: args.showItemSecondary ? item.secondary : undefined
            };
        });
    }, [items, args.showItemVisual, args.showItemSecondary]);
    const buttonText = useMemo(() => {
        const selected = menuHelpers.getSelected(items)[0];
        return selected ? selected.primary : args.text;
    }, [items]);
    useEffect(() => {
        setItems(cur => {
            return menuHelpers.mapTree(cur, item => {
                return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };
            });
        });
    }, [args.showItemCount]);
    return (<MenuButton text={buttonText} variant={args.variant} icon={args.showIcon ? 'user-list-solid' : undefined} iconOnly={args.iconOnly} showArrow={args.showArrow} menu={{
            mode: 'single-select',
            items: itemsToRender,
            onItemClick: handleMenuItemClick
        }}/>);
};
MenuButtonSingleSelect.args = {
    text: 'Select an item'
};
export const MenuButtonMultiSelect = (args) => {
    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
        return {
            id: `${i}`,
            primary: `Item ${i + 1}`,
            secondary: ['Meta A', 'Meta B', 'Meta C'],
            selected: false
        };
    }));
    const handleMenuItemClick = (id) => {
        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
    };
    const itemsToRender = useMemo(() => {
        return menuHelpers.mapTree(items, item => {
            return {
                ...item,
                visual: args.showItemVisual ? <Avatar name={item.primary}/> : undefined,
                secondary: args.showItemSecondary ? item.secondary : undefined
            };
        });
    }, [items, args.showItemVisual, args.showItemSecondary]);
    const selectionCount = useMemo(() => menuHelpers.getSelected(items).length, [items]);
    useEffect(() => {
        setItems(cur => {
            return menuHelpers.mapTree(cur, item => {
                return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };
            });
        });
    }, [args.showItemCount]);
    return (<MenuButton text={args.text} variant={args.variant} icon={args.showIcon ? 'user-list-solid' : undefined} iconOnly={args.iconOnly} showArrow={args.showArrow} count={selectionCount} menu={{
            mode: 'multi-select',
            items: itemsToRender,
            onItemClick: handleMenuItemClick,
            footer: (<Flex container={{ justify: 'center' }}>
            <Button variant='link' disabled={selectionCount <= 0} onClick={() => {
                    setItems(cur => {
                        return menuHelpers.mapTree(cur, item => {
                            return {
                                ...item,
                                selected: false
                            };
                        });
                    });
                }}>
              Clear
            </Button>
          </Flex>)
        }}/>);
};
MenuButtonMultiSelect.args = {
    text: 'Select items'
};
export const MenuButtonDisabledItems = (args) => {
    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
        return {
            id: `${i}`,
            primary: `Item ${i + 1}`,
            secondary: ['Meta A', 'Meta B', 'Meta C'],
            selected: false
        };
    }));
    const itemsToRender = useMemo(() => {
        return menuHelpers.mapTree(items, (item, index) => {
            return {
                ...item,
                visual: args.showItemVisual ? <Avatar name={item.primary}/> : undefined,
                secondary: args.showItemSecondary ? item.secondary : undefined,
                disabled: (index + 1) % 2 === 0
            };
        });
    }, [items, args.showItemVisual, args.showItemSecondary]);
    useEffect(() => {
        setItems(cur => {
            return menuHelpers.mapTree(cur, item => {
                return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };
            });
        });
    }, [args.showItemCount]);
    return (<MenuButton text={args.text} variant={args.variant} icon={args.showIcon ? 'user-list-solid' : undefined} iconOnly={args.iconOnly} showArrow={args.showArrow} menu={{
            mode: 'action',
            items: itemsToRender,
            onItemClick: args.onItemClick
        }}/>);
};
MenuButtonDisabledItems.args = {
    text: 'Actions'
};
//# sourceMappingURL=MenuButton.stories.jsx.map