"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemePickers = exports.PartPicker = exports.themePickerStyles = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var menu_1 = require("@fluentui-react-native/menu");
var text_1 = require("@fluentui-react-native/text");
var react_native_svg_1 = require("react-native-svg");
var applyTheme_1 = require("./applyTheme");
var CustomThemes_1 = require("./CustomThemes");
exports.themePickerStyles = react_native_1.StyleSheet.create({
    pickerRoot: {
        flexDirection: 'row',
    },
    picker: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 4,
    },
    dropdown: {
        height: 30,
        width: 90,
        fontSize: 12,
    },
});
var themeMenuPickerStyles = react_native_1.StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        margin: 5,
    },
    svg: {
        padding: 4,
    },
});
var ThemeMenuPicker = function (_a) {
    var selected = _a.selected, onChange = _a.onChange, collection = _a.collection, style = _a.style;
    var chevronXml = "\n  <svg width=\"12\" height=\"16\" viewBox=\"0 0 11 6\" color=\"#000\">\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>";
    return (React.createElement(react_native_1.View, { style: tslib_1.__assign(tslib_1.__assign({}, themeMenuPickerStyles.container), style) },
        React.createElement(menu_1.Menu, null,
            React.createElement(menu_1.MenuTrigger, null,
                React.createElement(react_native_2.ButtonV1, null,
                    React.createElement(text_1.TextV1, null, selected),
                    React.createElement(react_native_1.View, { style: themeMenuPickerStyles.svg },
                        React.createElement(react_native_svg_1.SvgXml, { xml: chevronXml })))),
            React.createElement(menu_1.MenuPopover, null,
                React.createElement(menu_1.MenuList, null, collection.map(function (entry, index) { return (React.createElement(menu_1.MenuItem, { onClick: function () { return onChange(entry.value); }, key: "entry".concat(index) }, entry.label)); }))))));
};
var PartPicker = function (props) {
    var initial = props.initial, contents = props.contents, onChange = props.onChange;
    var _a = React.useState(initial), value = _a[0], setValue = _a[1];
    var onValueChange = React.useCallback(function (newValue) {
        setValue(newValue);
        onChange(newValue);
    }, [setValue, onChange]);
    return React.createElement(ThemeMenuPicker, { selected: value, style: exports.themePickerStyles.dropdown, onChange: onValueChange, collection: contents });
};
exports.PartPicker = PartPicker;
var PickerLabel = text_1.TextV1.customize({ variant: 'bodySemibold' });
var ThemePickers = function () {
    var onThemeSelected = React.useCallback(function (newTheme) {
        CustomThemes_1.testerTheme.themeName = newTheme;
    }, []);
    return (React.createElement(react_native_1.View, { style: exports.themePickerStyles.pickerRoot },
        React.createElement(react_native_1.View, { style: exports.themePickerStyles.picker },
            React.createElement(PickerLabel, null, "Theme: "),
            React.createElement(exports.PartPicker, { initial: CustomThemes_1.testerTheme.themeName, onChange: onThemeSelected, contents: applyTheme_1.themeChoices }))));
};
exports.ThemePickers = ThemePickers;
//# sourceMappingURL=ThemePickers.macos.js.map