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 const themePickerStyles = themedStyleSheet((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 const ThemePickers = () => {
    const themedStyles = themePickerStyles(useTheme());
    const onThemeSelected = React.useCallback((newTheme) => {
        testerTheme.themeName = newTheme;
    }, []);
    const themeMenuOptions = themeChoices.map((themeChoice) => ({
        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: ({ nativeEvent }) => {
                onThemeSelected(nativeEvent.event);
            }, actions: themeMenuOptions },
            React.createElement(Button, { appearance: "subtle" }, "Theme"))));
};
//# sourceMappingURL=ThemePickers.ios.js.map