"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemePickers = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var framework_1 = require("@fluentui-react-native/framework");
var text_1 = require("@fluentui-react-native/text");
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
var picker_1 = require("@react-native-picker/picker");
var applyTheme_1 = require("./applyTheme");
var CustomThemes_1 = require("./CustomThemes");
var getThemedDropdownStyles = (0, themed_stylesheet_1.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_1.TextV1.customize({ variant: 'subheaderSemibold' });
var ThemePickers = function () {
    var onThemeSelected = React.useCallback(function (newTheme) {
        CustomThemes_1.testerTheme.themeName = newTheme;
    }, []);
    var onAppearanceChange = React.useCallback(function (newAppearance) {
        CustomThemes_1.testerTheme.appearance = newAppearance;
    }, []);
    var theme = (0, framework_1.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(react_native_1.View, { style: themedPickerStyles.dropdownBorder },
            React.createElement(picker_1.Picker, tslib_1.__assign({ selectedValue: initial, onValueChange: onValueChange, dropdownIconColor: theme.colors.defaultIcon }, dropdownProps, { accessibilityLabel: accessibilityLabel }), options.map(function (entry, index) { return entry && React.createElement(picker_1.Picker.Item, { label: entry.label, value: entry.value, key: "entry".concat(index) }); }))));
    };
    return (React.createElement(react_native_1.View, { style: themedPickerStyles.pickerRoot },
        React.createElement(react_native_1.View, { style: themedPickerStyles.picker },
            React.createElement(PickerLabel, null, "Theme: "),
            React.createElement(Dropdown, { accessibilityLabel: "Theme Selector", initial: CustomThemes_1.testerTheme.themeName, onValueChange: onThemeSelected, options: applyTheme_1.themeChoices })),
        React.createElement(react_native_1.View, { style: themedPickerStyles.picker },
            React.createElement(PickerLabel, null, "Light/Dark: "),
            React.createElement(Dropdown, { accessibilityLabel: "Light/Dark Selector", initial: CustomThemes_1.testerTheme.appearance, onValueChange: onAppearanceChange, options: CustomThemes_1.lightnessOptions }))));
};
exports.ThemePickers = ThemePickers;
//# sourceMappingURL=ThemePickers.android.js.map