"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuPicker = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const button_1 = require("@fluentui-react-native/button");
const framework_1 = require("@fluentui-react-native/framework");
const text_1 = require("@fluentui-react-native/text");
const menu_1 = require("@react-native-menu/menu");
const react_native_svg_1 = require("react-native-svg");
const 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
 */
const chevronXml = `
<svg width="12" height="16" viewBox="0 0 11 6">
  <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' />
</svg>`;
const styles = react_native_1.StyleSheet.create({
    menuPickerPromptText: {
        marginBottom: 4,
    },
    menuPickerIconPadding: {
        paddingLeft: 12,
    },
});
const MenuPicker = (props) => {
    const { prompt, selected, onChange, collection, style, testID } = props;
    let selectedItemKey;
    collection.forEach((item) => {
        if (item.value == selected) {
            selectedItemKey = item.value;
        }
    });
    const pickerOptions = collection.map((item) => ({
        id: item.label,
        title: item.label,
        state: item.value === selected ? 'on' : 'off',
    }));
    const theme = (0, framework_1.useFluentTheme)();
    return (React.createElement(menu_1.MenuView, { title: prompt, onPressAction: ({ 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