import * as React from 'react';
import { Text as TextRN, View } from 'react-native';
import { StyleSheet } from 'react-native';
import { Text } from '@fluentui/react-native';
import { THEME_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import { useFluentTheme } from '@fluentui-react-native/framework';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { commonTestStyles } from '../Common/styles';
import { Test } from '../Test';
const getThemedStyles = themedStyleSheet((theme) => {
    return {
        swatch: {
            color: theme.colors.neutralForeground1,
        },
        rootView: {
            backgroundColor: theme.colors.brandBackground,
        },
    };
});
const styles = StyleSheet.create({
    swatchItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 5,
    },
    panel: {
        ...commonTestStyles.view,
        borderWidth: 2,
        padding: 12,
        margin: 8,
    },
    pickerContainer: {
        flexDirection: 'row',
        justifyContent: 'space-evenly',
    },
    stackStyle: {
        borderWidth: 2,
        padding: 12,
        margin: 8,
    },
});
const Panel = () => {
    const theme = useFluentTheme();
    const themedStyles = getThemedStyles(theme);
    return (React.createElement(View, null,
        React.createElement(Text, { style: { color: theme.colors.buttonBackgroundChecked } }, "buttonBackgroundChecked styled text"),
        React.createElement(Text, { style: { color: theme.colors.neutralForeground1 } }, "neutralForeground1 styled text"),
        React.createElement(Text, { style: { color: theme.colors.hostColorPink } }, "hostColorPink styled text"),
        React.createElement(Text, { style: { color: theme.colors.hostColorButtonBackground } }, "hostColorButtonBackground styled text"),
        React.createElement(Text, { style: { color: theme.colors.hostColorBrandText } }, "hostColorBrandText styled text"),
        React.createElement(TextRN, { style: { color: theme.colors.yellowBrandColor } }, "yellowBrandColor styled text"),
        React.createElement(TextRN, { style: themedStyles.swatch }, "Styled RN Text")));
};
const getSwatchColorStyle = (name, color) => {
    styles[name] = styles[name] || { backgroundColor: color };
    return styles[name];
};
const SemanticColor = (p) => {
    const themedStyles = getThemedStyles(useFluentTheme());
    return (React.createElement(View, { style: styles.swatchItem },
        React.createElement(View, { style: [getSwatchColorStyle(p.name, p.color), themedStyles.swatch] }),
        React.createElement(Text, null, p.name)));
};
const SwatchList = () => {
    const theme = useFluentTheme();
    const palette = theme.colors;
    const aggregator = React.useCallback((key) => {
        return { key: key + ' (' + palette[key] + ')', color: palette[key] };
    }, [palette]);
    const flattenArray = React.useCallback(() => {
        return Object.keys(palette).sort().map(aggregator);
    }, [palette, aggregator]);
    const paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
    const renderSwatch = React.useCallback((item) => {
        const { color, key } = item;
        return React.createElement(SemanticColor, { key: key, color: color, name: key });
    }, []);
    return (React.createElement(View, { style: commonTestStyles.view },
        React.createElement(Text, null, "getColorsAndroid(theme: ITheme).palette"),
        React.createElement(View, { style: styles.stackStyle }, paletteAsArray.map((item) => renderSwatch(item)))));
};
const themeSections = [
    {
        name: 'Component Examples',
        testID: THEME_TESTPAGE,
        component: Panel,
    },
    {
        name: 'Theme.colors',
        component: () => React.createElement(SwatchList, null),
    },
];
export const ThemeTest = () => {
    const status = {
        win32Status: 'Beta',
        uwpStatus: 'Experimental',
        iosStatus: 'Experimental',
        macosStatus: 'Experimental',
        androidStatus: 'Beta',
    };
    const description = 'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
    return React.createElement(Test, { name: "Theme Test", description: description, sections: themeSections, status: status });
};
//# sourceMappingURL=ThemeTest.android.js.map