"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.ThemePickers = exports.PartPicker = exports.themePickerStyles = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const menu_1 = require("@fluentui-react-native/menu");
const text_1 = require("@fluentui-react-native/text");
const react_native_svg_1 = require("react-native-svg");
const applyTheme_1 = require("./applyTheme");
const 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,
    },
});
const themeMenuPickerStyles = react_native_1.StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        margin: 5,
    },
    svg: {
        padding: 4,
    },
});
const ThemeMenuPicker = ({ selected, onChange, collection, style }) => {
    const chevronXml = `
  <svg width="12" height="16" viewBox="0 0 11 6" color="#000">
    <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>`;
    return (React.createElement(react_native_1.View, { style: { ...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((entry, index) => (React.createElement(menu_1.MenuItem, { onClick: () => onChange(entry.value), key: `entry${index}` }, entry.label))))))));
};
const PartPicker = (props) => {
    const { initial, contents, onChange } = props;
    const [value, setValue] = React.useState(initial);
    const onValueChange = React.useCallback((newValue) => {
        setValue(newValue);
        onChange(newValue);
    }, [setValue, onChange]);
    return React.createElement(ThemeMenuPicker, { selected: value, style: exports.themePickerStyles.dropdown, onChange: onValueChange, collection: contents });
};
exports.PartPicker = PartPicker;
const PickerLabel = text_1.TextV1.customize({ variant: 'bodySemibold' });
const ThemePickers = () => {
    const onThemeSelected = React.useCallback((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