import { __assign } from "tslib";
import * as React from 'react';
import { View } from 'react-native';
import { useTheme } from '@fluentui-react-native/framework';
import { TextV1 as Text } from '@fluentui-react-native/text';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { Picker } from '@react-native-picker/picker';
import { themeChoices } from './applyTheme';
import { lightnessOptions, testerTheme } from './CustomThemes';
var getThemedDropdownStyles = themedStyleSheet(function (t) {
    return {
        pickerRoot: {
            flexDirection: 'row',
            width: '100%',
        },
        picker: {
            flexDirection: 'column',
            alignItems: 'center',
            width: '50%',
            padding: 4,
        },
        dropdown: {
            fontSize: 12,
            color: t.colors.bodyText,
        },
        dropdownBorder: {
            borderStyle: 'solid',
            borderColor: t.colors.disabledBodyText,
            borderWidth: 1,
            width: '100%',
        },
    };
});
var PickerLabel = Text.customize({ variant: 'subheaderSemibold' });
export var ThemePickers = function () {
    var onThemeSelected = React.useCallback(function (newTheme) {
        testerTheme.themeName = newTheme;
    }, []);
    var onAppearanceChange = React.useCallback(function (newAppearance) {
        testerTheme.appearance = newAppearance;
    }, []);
    var theme = useTheme();
    var themedPickerStyles = getThemedDropdownStyles(theme);
    var dropdownProps = {
        style: themedPickerStyles.dropdown,
        mode: 'dropdown',
    };
    var Dropdown = function (props) {
        var initial = props.initial, onValueChange = props.onValueChange, options = props.options, accessibilityLabel = props.accessibilityLabel;
        return (React.createElement(View, { style: themedPickerStyles.dropdownBorder },
            React.createElement(Picker, __assign({ selectedValue: initial, onValueChange: onValueChange, dropdownIconColor: theme.colors.defaultIcon }, dropdownProps, { accessibilityLabel: accessibilityLabel }), options.map(function (entry, index) { return entry && React.createElement(Picker.Item, { label: entry.label, value: entry.value, key: "entry".concat(index) }); }))));
    };
    return (React.createElement(View, { style: themedPickerStyles.pickerRoot },
        React.createElement(View, { style: themedPickerStyles.picker },
            React.createElement(PickerLabel, null, "Theme: "),
            React.createElement(Dropdown, { accessibilityLabel: "Theme Selector", initial: testerTheme.themeName, onValueChange: onThemeSelected, options: themeChoices })),
        React.createElement(View, { style: themedPickerStyles.picker },
            React.createElement(PickerLabel, null, "Light/Dark: "),
            React.createElement(Dropdown, { accessibilityLabel: "Light/Dark Selector", initial: testerTheme.appearance, onValueChange: onAppearanceChange, options: lightnessOptions }))));
};
//# sourceMappingURL=ThemePickers.android.js.map