"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuPicker = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var button_1 = require("@fluentui-react-native/button");
var framework_1 = require("@fluentui-react-native/framework");
var text_1 = require("@fluentui-react-native/text");
var menu_1 = require("@react-native-menu/menu");
var react_native_svg_1 = require("react-native-svg");
var TestProps_1 = require("./TestProps");
/*
 * The MenuPicker was created because the RN Core Picker was deprecated (preventing us from updating to RN 0.66).
 * MenuPicker uses the community MenuView package for iOS
 */
var chevronXml = "\n<svg width=\"12\" height=\"16\" viewBox=\"0 0 11 6\">\n  <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' />\n</svg>";
var styles = react_native_1.StyleSheet.create({
    menuPickerPromptText: {
        marginBottom: 4,
    },
    menuPickerIconPadding: {
        paddingLeft: 12,
    },
});
var MenuPicker = function (props) {
    var prompt = props.prompt, selected = props.selected, onChange = props.onChange, collection = props.collection, style = props.style, testID = props.testID;
    var selectedItemKey;
    collection.forEach(function (item) {
        if (item.value == selected) {
            selectedItemKey = item.value;
        }
    });
    var pickerOptions = collection.map(function (item) { return ({
        id: item.label,
        title: item.label,
        state: item.value === selected ? 'on' : 'off',
    }); });
    var theme = (0, framework_1.useFluentTheme)();
    return (React.createElement(menu_1.MenuView, tslib_1.__assign({ title: prompt, onPressAction: function (_a) {
            var nativeEvent = _a.nativeEvent;
            onChange(nativeEvent.event);
        }, actions: pickerOptions, style: style }, (0, TestProps_1.testProps)(testID)),
        React.createElement(text_1.Text, { variant: "bodySemibold", style: styles.menuPickerPromptText }, prompt),
        React.createElement(button_1.ButtonV1, { appearance: "outline" },
            React.createElement(text_1.Text, { variant: "bodySemibold" }, selectedItemKey),
            React.createElement(react_native_1.View, { style: styles.menuPickerIconPadding },
                React.createElement(react_native_svg_1.SvgXml, { xml: chevronXml, color: theme.colors.bodyText })))));
};
exports.MenuPicker = MenuPicker;
//# sourceMappingURL=MenuPicker.ios.js.map