"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemePickers = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const framework_1 = require("@fluentui-react-native/framework");
const text_1 = require("@fluentui-react-native/text");
const themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
const picker_1 = require("@react-native-picker/picker");
const applyTheme_1 = require("./applyTheme");
const CustomThemes_1 = require("./CustomThemes");
const getThemedDropdownStyles = (0, themed_stylesheet_1.themedStyleSheet)((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%',
        },
    };
});
const PickerLabel = text_1.TextV1.customize({ variant: 'subheaderSemibold' });
const ThemePickers = () => {
    const onThemeSelected = React.useCallback((newTheme) => {
        CustomThemes_1.testerTheme.themeName = newTheme;
    }, []);
    const onAppearanceChange = React.useCallback((newAppearance) => {
        CustomThemes_1.testerTheme.appearance = newAppearance;
    }, []);
    const theme = (0, framework_1.useTheme)();
    const themedPickerStyles = getThemedDropdownStyles(theme);
    const dropdownProps = {
        style: themedPickerStyles.dropdown,
        mode: 'dropdown',
    };
    const Dropdown = (props) => {
        const { initial, onValueChange, options, accessibilityLabel } = props;
        return (React.createElement(react_native_1.View, { style: themedPickerStyles.dropdownBorder },
            React.createElement(picker_1.Picker, { selectedValue: initial, onValueChange: onValueChange, dropdownIconColor: theme.colors.defaultIcon, ...dropdownProps, accessibilityLabel: accessibilityLabel }, options.map((entry, index) => entry && React.createElement(picker_1.Picker.Item, { label: entry.label, value: entry.value, key: `entry${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