import * as React from 'react';
import { ButtonV1 as Button } from '@fluentui/react-native';
import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
import { Stack } from '@fluentui-react-native/stack';
import Svg, { Path } from 'react-native-svg';
import { stackStyle } from '../Common/styles';
export var MenuTriggerOnClickCallback = function () {
    var _a = React.useState(0), counter = _a[0], setCounter = _a[1];
    var onClick = React.useCallback(function () {
        setCounter(counter + 1);
    }, [counter, setCounter]);
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, { onClick: onClick }, 'Click to increase counter: ' + counter)),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A plain MenuItem"),
                    React.createElement(MenuItem, { disabled: true }, "A second disabled plain MenuItem"),
                    React.createElement(MenuItem, null, "A third plain MenuItem"))))));
};
export var MenuTriggerHoverCallback = function () {
    var _a = React.useState('red'), iconColor = _a[0], setIconColor = _a[1];
    var onHoverIn = React.useCallback(function () {
        setIconColor('blue');
    }, [setIconColor]);
    var onHoverOut = React.useCallback(function () {
        setIconColor('red');
    }, [setIconColor]);
    var chevron = (React.createElement(Svg, { width: "12", height: "16", viewBox: "0 0 11 6", color: iconColor },
        React.createElement(Path, { fill: "currentColor", d: "M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z" })));
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, { onHoverIn: onHoverIn, onHoverOut: onHoverOut },
                    "Test",
                    chevron)),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, null, "A plain MenuItem"),
                    React.createElement(MenuItem, { disabled: true }, "A second disabled plain MenuItem"),
                    React.createElement(MenuItem, null, "A third plain MenuItem"))))));
};
//# sourceMappingURL=MenuTriggerCallbacks.js.map