import React from 'react';
import { Platform } from 'react-native';
import { ButtonV1 as Button } from '@fluentui/react-native';
import { Menu, MenuItem, MenuItemCheckbox, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
import { Stack } from '@fluentui-react-native/stack';
import { testImage, svgProps } from '../Common/iconExamples';
import { stackStyle } from '../Common/styles';
const fontBuiltInProps = {
    fontFamily: 'Arial',
    codepoint: 0x2663,
};
const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
export const MenuIcons = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Menu, { hasIcons: true },
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null, "Items with icons")),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null,
                    React.createElement(MenuItem, { icon: { source: testImage } }, "Option 1 image icon"),
                    React.createElement(MenuItem, { icon: { fontSource: { ...fontBuiltInProps, style: { textAlign: 'center', marginTop: -1 } } } }, "Option 2 font icon"),
                    svgIconsEnabled && React.createElement(MenuItem, { icon: { svgSource: svgProps } }, "Option 3 svg icon"),
                    React.createElement(MenuItem, null, "Option 4 no icon"),
                    React.createElement(MenuItemCheckbox, { icon: { source: testImage }, name: "Option4" }, "Option 5 checkbox"))))));
};
//# sourceMappingURL=MenuIcons.js.map