import * as React from 'react';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { Toggle } from '@fluentui/react/lib/Toggle';
import { ContextualMenuItemType, DirectionalHint, } from '@fluentui/react/lib/ContextualMenu';
import { Dropdown } from '@fluentui/react/lib/Dropdown';
import { getRTL } from '@fluentui/react/lib/Utilities';
import { Stack } from '@fluentui/react/lib/Stack';
import { useBoolean } from '@fluentui/react-hooks';
export var ContextualMenuDirectionalExample = function () {
    var _a = useBoolean(false), isBeakVisible = _a[0], toggleIsBeakVisible = _a[1].toggle;
    var _b = useBoolean(false), useDirectionalHintForRTL = _b[0], toggleUseDirectionalHintForRTL = _b[1].toggle;
    var _c = React.useState(DirectionalHint.bottomLeftEdge), directionalHint = _c[0], setDirectionalHint = _c[1];
    var _d = React.useState(DirectionalHint.bottomLeftEdge), directionalHintForRTL = _d[0], setDirectionalHintForRTL = _d[1];
    var onDirectionalChanged = React.useCallback(function (event, option) {
        setDirectionalHint(option.key);
    }, []);
    var onDirectionalRtlChanged = React.useCallback(function (event, option) {
        setDirectionalHintForRTL(option.key);
    }, []);
    var menuProps = React.useMemo(function () { return ({
        isBeakVisible: isBeakVisible,
        directionalHint: directionalHint,
        directionalHintForRTL: useDirectionalHintForRTL ? directionalHintForRTL : undefined,
        gapSpace: 0,
        beakWidth: 20,
        directionalHintFixed: false,
        items: menuItems,
    }); }, [isBeakVisible, directionalHint, directionalHintForRTL, useDirectionalHintForRTL]);
    return (React.createElement("div", null,
        React.createElement(Stack, { horizontal: true, wrap: true, tokens: stackTokens },
            React.createElement(Toggle, { label: "Show beak", checked: isBeakVisible, onChange: toggleIsBeakVisible }),
            React.createElement(Dropdown, { label: "Directional hint", selectedKey: directionalHint, options: directionOptions, onChange: onDirectionalChanged, styles: dropdownStyles }),
            getRTL() && (React.createElement(Toggle, { label: "Use RTL directional hint", checked: useDirectionalHintForRTL, onChange: toggleUseDirectionalHintForRTL })),
            getRTL() && (React.createElement(Dropdown, { label: "Directional hint for RTL", selectedKey: directionalHintForRTL, options: directionOptions, onChange: onDirectionalRtlChanged, disabled: !useDirectionalHintForRTL, styles: dropdownStyles }))),
        React.createElement("br", null),
        React.createElement(DefaultButton, { text: "Show context menu", menuProps: menuProps })));
};
var menuItems = [
    { key: 'newItem', text: 'New' },
    { key: 'divider_1', itemType: ContextualMenuItemType.Divider },
    { key: 'rename', text: 'Rename' },
    { key: 'edit', text: 'Edit' },
    { key: 'properties', text: 'Properties' },
    { key: 'disabled', text: 'Disabled item', disabled: true },
];
var directionOptions = [
    { key: DirectionalHint.topLeftEdge, text: 'Top left edge' },
    { key: DirectionalHint.topCenter, text: 'Top center' },
    { key: DirectionalHint.topRightEdge, text: 'Top right edge' },
    { key: DirectionalHint.topAutoEdge, text: 'Top auto edge' },
    { key: DirectionalHint.bottomLeftEdge, text: 'Bottom left edge' },
    { key: DirectionalHint.bottomCenter, text: 'Bottom center' },
    { key: DirectionalHint.bottomRightEdge, text: 'Bottom right edge' },
    { key: DirectionalHint.bottomAutoEdge, text: 'Bottom auto edge' },
    { key: DirectionalHint.leftTopEdge, text: 'Left top edge' },
    { key: DirectionalHint.leftCenter, text: 'Left center' },
    { key: DirectionalHint.leftBottomEdge, text: 'Left bottom edge' },
    { key: DirectionalHint.rightTopEdge, text: 'Right top edge' },
    { key: DirectionalHint.rightCenter, text: 'Right center' },
    { key: DirectionalHint.rightBottomEdge, text: 'Right bottom edge' },
];
var stackTokens = { childrenGap: 30 };
var dropdownStyles = { root: { width: 200 } };
//# sourceMappingURL=ContextualMenu.Directional.Example.js.map