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';
const getThemedDropdownStyles = 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.customize({ variant: 'subheaderSemibold' });
export const ThemePickers = () => {
    const onThemeSelected = React.useCallback((newTheme) => {
        testerTheme.themeName = newTheme;
    }, []);
    const onAppearanceChange = React.useCallback((newAppearance) => {
        testerTheme.appearance = newAppearance;
    }, []);
    const theme = useTheme();
    const themedPickerStyles = getThemedDropdownStyles(theme);
    const dropdownProps = {
        style: themedPickerStyles.dropdown,
        mode: 'dropdown',
    };
    const Dropdown = (props) => {
        const { initial, onValueChange, options, accessibilityLabel } = props;
        return (React.createElement(View, { style: themedPickerStyles.dropdownBorder },
            React.createElement(Picker, { selectedValue: initial, onValueChange: onValueChange, dropdownIconColor: theme.colors.defaultIcon, ...dropdownProps, accessibilityLabel: accessibilityLabel }, options.map((entry, index) => entry && React.createElement(Picker.Item, { label: entry.label, value: entry.value, key: `entry${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