import * as React from 'react';
import { View } from 'react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { useTheme } from '@fluentui-react-native/framework';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { MenuView } from '@react-native-menu/menu';
import { themeChoices } from './applyTheme';
import { testerTheme } from './CustomThemes';
export var themePickerStyles = themedStyleSheet(function (t) {
    // picker, pickerItem, dropdown used in iOS dark mode
    return {
        pickerRoot: {
            flexDirection: 'row',
        },
        picker: {
            flexDirection: 'column',
            alignItems: 'center',
            padding: 4,
            flexShrink: 0,
        },
        pickerItem: {
            color: t.colors.bodyText,
        },
        dropdown: {
            height: 200,
            width: 90,
            fontSize: 12,
        },
    };
});
export var ThemePickers = function () {
    var themedStyles = themePickerStyles(useTheme());
    var onThemeSelected = React.useCallback(function (newTheme) {
        testerTheme.themeName = newTheme;
    }, []);
    var themeMenuOptions = themeChoices.map(function (themeChoice) { return ({
        id: themeChoice.value,
        title: themeChoice.label,
        state: testerTheme.themeName === themeChoice.value ? 'on' : 'off',
    }); });
    return (React.createElement(View, { style: themedStyles.pickerRoot },
        React.createElement(MenuView, { title: "Theme", onPressAction: function (_a) {
                var nativeEvent = _a.nativeEvent;
                onThemeSelected(nativeEvent.event);
            }, actions: themeMenuOptions },
            React.createElement(Button, { appearance: "subtle" }, "Theme"))));
};
//# sourceMappingURL=ThemePickers.ios.js.map