import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { themeChoices } from './applyTheme';
import { lightnessOptions, testerTheme } from './CustomThemes';
import { MenuPicker } from '../TestComponents/Common/MenuPicker';
export var themePickerStyles = StyleSheet.create({
    pickerRoot: {
        flexDirection: 'row',
    },
    picker: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 4,
    },
    dropdown: {
        height: 30,
        width: 120,
        fontSize: 12,
    },
});
export var PartPicker = function (props) {
    var initial = props.initial, contents = props.contents, onChange = props.onChange;
    var _a = React.useState(initial), selected = _a[0], setSelected = _a[1];
    var onValueChange = React.useCallback(function (value) {
        setSelected(value);
        onChange(value);
    }, [setSelected, onChange]);
    return React.createElement(MenuPicker, { selected: selected, 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;
    }, []);
    var onAppearanceChange = React.useCallback(function (newAppearance) {
        testerTheme.appearance = newAppearance;
    }, []);
    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 })),
        React.createElement(View, { style: themePickerStyles.picker },
            React.createElement(PickerLabel, null, "Light/Dark: "),
            React.createElement(PartPicker, { initial: testerTheme.appearance, onChange: onAppearanceChange, contents: lightnessOptions }))));
};
//# sourceMappingURL=ThemePickers.js.map