"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuTriggerHoverCallback = exports.MenuTriggerOnClickCallback = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("@fluentui/react-native");
const menu_1 = require("@fluentui-react-native/menu");
const stack_1 = require("@fluentui-react-native/stack");
const react_native_svg_1 = tslib_1.__importStar(require("react-native-svg"));
const styles_1 = require("../Common/styles");
const MenuTriggerOnClickCallback = () => {
    const [counter, setCounter] = React.useState(0);
    const onClick = React.useCallback(() => {
        setCounter(counter + 1);
    }, [counter, setCounter]);
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(menu_1.Menu, null,
            React.createElement(menu_1.MenuTrigger, null,
                React.createElement(react_native_1.ButtonV1, { onClick: onClick }, 'Click to increase counter: ' + counter)),
            React.createElement(menu_1.MenuPopover, null,
                React.createElement(menu_1.MenuList, null,
                    React.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                    React.createElement(menu_1.MenuItem, { disabled: true }, "A second disabled plain MenuItem"),
                    React.createElement(menu_1.MenuItem, null, "A third plain MenuItem"))))));
};
exports.MenuTriggerOnClickCallback = MenuTriggerOnClickCallback;
const MenuTriggerHoverCallback = () => {
    const [iconColor, setIconColor] = React.useState('red');
    const onHoverIn = React.useCallback(() => {
        setIconColor('blue');
    }, [setIconColor]);
    const onHoverOut = React.useCallback(() => {
        setIconColor('red');
    }, [setIconColor]);
    const chevron = (React.createElement(react_native_svg_1.default, { width: "12", height: "16", viewBox: "0 0 11 6", color: iconColor },
        React.createElement(react_native_svg_1.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_1.Stack, { style: styles_1.stackStyle },
        React.createElement(menu_1.Menu, null,
            React.createElement(menu_1.MenuTrigger, null,
                React.createElement(react_native_1.ButtonV1, { onHoverIn: onHoverIn, onHoverOut: onHoverOut },
                    "Test",
                    chevron)),
            React.createElement(menu_1.MenuPopover, null,
                React.createElement(menu_1.MenuList, null,
                    React.createElement(menu_1.MenuItem, null, "A plain MenuItem"),
                    React.createElement(menu_1.MenuItem, { disabled: true }, "A second disabled plain MenuItem"),
                    React.createElement(menu_1.MenuItem, null, "A third plain MenuItem"))))));
};
exports.MenuTriggerHoverCallback = MenuTriggerHoverCallback;
//# sourceMappingURL=MenuTriggerCallbacks.js.map