import { __assign } from "tslib";
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { ButtonV1 as Button } from '@fluentui/react-native';
import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { SvgXml } from 'react-native-svg';
import { themeChoices } from './applyTheme';
import { testerTheme } from './CustomThemes';
export var themePickerStyles = StyleSheet.create({
    pickerRoot: {
        flexDirection: 'row',
    },
    picker: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 4,
    },
    dropdown: {
        height: 30,
        width: 90,
        fontSize: 12,
    },
});
var themeMenuPickerStyles = 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(View, { style: __assign(__assign({}, themeMenuPickerStyles.container), style) },
        React.createElement(Menu, null,
            React.createElement(MenuTrigger, null,
                React.createElement(Button, null,
                    React.createElement(Text, null, selected),
                    React.createElement(View, { style: themeMenuPickerStyles.svg },
                        React.createElement(SvgXml, { xml: chevronXml })))),
            React.createElement(MenuPopover, null,
                React.createElement(MenuList, null, collection.map(function (entry, index) { return (React.createElement(MenuItem, { onClick: function () { return onChange(entry.value); }, key: "entry".concat(index) }, entry.label)); }))))));
};
export 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: themePickerStyles.dropdown, onChange: onValueChange, collection: contents });
};
var PickerLabel = Text.customize({ variant: 'bodySemibold' });
export var ThemePickers = function () {
    var onThemeSelected = React.useCallback(function (newTheme) {
        testerTheme.themeName = newTheme;
    }, []);
    return (React.createElement(View, { style: themePickerStyles.pickerRoot },
        React.createElement(View, { style: themePickerStyles.picker },
            React.createElement(PickerLabel, null, "Theme: "),
            React.createElement(PartPicker, { initial: testerTheme.themeName, onChange: onThemeSelected, contents: themeChoices }))));
};
//# sourceMappingURL=ThemePickers.macos.js.map