import { __assign } from "tslib";
import * as React from 'react';
import { keytipMap } from '@fluentui/examples/lib/office-ui-fabric-react/Keytip/KeytipSetup';
import { OverflowSet } from '@fluentui/react-next/lib/OverflowSet';
import { CommandBarButton, DefaultButton } from '@fluentui/react-next/lib/compat/Button';
var overflowSetStyles = { root: { marginBottom: 28 } };
var commandBarButtonStyles = { root: { padding: '10px' } };
var initialItems = [
    {
        key: 'item1',
        name: 'Link 1',
        onClick: function () {
            return;
        },
        keytipProps: keytipMap.OverflowButton1,
    },
    {
        key: 'item2',
        name: 'Link 2',
        onClick: function () {
            return;
        },
        keytipProps: keytipMap.OverflowButton2,
    },
    {
        key: 'item3',
        name: 'Link 3',
        onClick: function () {
            return;
        },
        keytipProps: keytipMap.OverflowButton3,
    },
];
var initialOverflowItems = [
    {
        key: 'item5',
        name: 'Overflow Link 1',
        keytipProps: __assign(__assign({}, keytipMap.OverflowButton5), { onExecute: function (el) {
                if (el) {
                    el.click();
                }
                else {
                    console.log('first overflow item');
                }
            } }),
        onClick: function () {
            console.log('first overflow item');
        },
    },
    {
        key: 'item6',
        name: 'Overflow Link 2',
        keytipProps: __assign(__assign({}, keytipMap.OverflowButton6), { onExecute: function (el) {
                if (el) {
                    el.click();
                }
                else {
                    console.log('second overflow item');
                }
            } }),
        onClick: function () {
            console.log('second overflow item');
        },
        subMenuProps: {
            items: [
                {
                    key: 'overflowSubMenu1',
                    name: 'Overflow Submenu Item 1',
                    keytipProps: keytipMap.OverflowSubMenuButton1,
                },
                {
                    key: 'overflowSubMenu2',
                    name: 'Overflow Submenu Item 2',
                },
            ],
        },
    },
];
export var KeytipsOverflowExample = function () {
    var _a = React.useState(initialItems), items = _a[0], setItems = _a[1];
    var _b = React.useState(initialOverflowItems), overflowItems = _b[0], setOverflowItems = _b[1];
    var onRenderItem = function (item) { return (React.createElement(CommandBarButton, __assign({ role: "menuitem" }, item, { styles: commandBarButtonStyles, menuProps: item.subMenuProps }), item.name)); };
    var onRenderOverflowButton = function () {
        return (React.createElement(CommandBarButton, { menuIconProps: { iconName: 'More' }, menuProps: { items: overflowItems }, keytipProps: keytipMap.OverflowButton4 }));
    };
    var onToggleOverflowItems = React.useCallback(function () {
        if (overflowItems.length) {
            setItems(items.concat(overflowItems));
            setOverflowItems([]);
        }
        else {
            setOverflowItems(items.slice(-2));
            setItems(items.slice(0, -2));
        }
    }, [items, overflowItems]);
    return (React.createElement("div", null,
        React.createElement("p", null, "Keytips in an overflow will have a special behavior. When a keytip goes into the overflow button menu, it will also register a 'persisted' keytip that can be accessed from the top level as a shortcut. A shortcut to a normal button item will trigger that button. A shortcut to a menu button item will open the overflow button menu and then open that item's menu as well. In this example triggering 'T' and 'Y' will show off this functionality (see console messages)."),
        React.createElement(OverflowSet, { role: "menubar", styles: overflowSetStyles, items: items, overflowItems: overflowItems, keytipSequences: keytipMap.OverflowButton4.keySequences, 
            // eslint-disable-next-line react/jsx-no-bind
            onRenderOverflowButton: onRenderOverflowButton, 
            // eslint-disable-next-line react/jsx-no-bind
            onRenderItem: onRenderItem }),
        React.createElement("p", null, "When an item is moved out of the overflow well, it behaves as a normal keytip."),
        React.createElement(DefaultButton, { text: 'Move overflow items', onClick: onToggleOverflowItems })));
};
//# sourceMappingURL=Keytips.Overflow.Example.js.map