"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var theme_types_1 = require("@fluentui-react-native/theme-types");
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
var consts_1 = require("../../../../E2E/src/Theme/consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (theme) {
    return {
        swatch: {
            width: 80,
            height: 20,
            marginRight: 5,
            borderWidth: 2,
            borderColor: theme.colors.bodyText,
        },
    };
});
var styles = react_native_1.StyleSheet.create({
    swatchItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 5,
    },
    panel: tslib_1.__assign(tslib_1.__assign({}, styles_1.commonTestStyles.view), { borderWidth: 2, padding: 12, margin: 8 }),
    pickerContainer: {
        flexDirection: 'row',
        justifyContent: 'space-evenly',
    },
    stackStyle: {
        borderWidth: 2,
        padding: 12,
        margin: 8,
    },
});
var Panel = function () {
    var _a = React.useState(false), disabled = _a[0], setDisabled = _a[1];
    var onClick = React.useCallback(function () { return setDisabled(!disabled); }, [disabled, setDisabled]);
    return (React.createElement(react_native_1.View, { style: styles.panel },
        React.createElement(react_native_2.PrimaryButton, { onClick: onClick, content: "Primary Button", disabled: disabled }),
        React.createElement(react_native_2.Button, { onClick: onClick, content: "Default Button", disabled: disabled }),
        React.createElement(react_native_2.StealthButton, { onClick: onClick, content: "Stealth Button", disabled: disabled }),
        React.createElement(react_native_2.Text, null, "This is a text element"),
        React.createElement(react_native_2.Button, { onClick: onClick, content: "This button has longer text", disabled: disabled })));
};
var getSwatchColorStyle = function (name, color) {
    styles[name] = styles[name] || { backgroundColor: color };
    return styles[name];
};
var SemanticColor = function (p) {
    var themedStyles = getThemedStyles((0, theme_types_1.useTheme)());
    return (React.createElement(react_native_1.View, { style: styles.swatchItem },
        React.createElement(react_native_1.View, { style: [getSwatchColorStyle(p.name, p.color), themedStyles.swatch] }),
        React.createElement(react_native_2.Text, null, p.name)));
};
var SwatchList = function () {
    var theme = (0, theme_types_1.useTheme)();
    var palette = theme.colors;
    var aggregator = React.useCallback(function (key) {
        return { key: key + ' (' + palette[key] + ')', color: palette[key] };
    }, [palette]);
    var flattenArray = React.useCallback(function () {
        return Object.keys(palette).sort().map(aggregator);
    }, [palette, aggregator]);
    var paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
    var renderSwatch = React.useCallback(function (item) {
        var color = item.color, key = item.key;
        return React.createElement(SemanticColor, { key: key, color: color, name: key });
    }, []);
    return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
        React.createElement(react_native_2.Text, null, "getHostSettingsWin32(theme: ITheme).palette"),
        React.createElement(react_native_1.View, { style: styles.stackStyle }, paletteAsArray.map(function (item) { return renderSwatch(item); }))));
};
var themeSections = [
    {
        name: 'Component Examples',
        testID: consts_1.THEME_TESTPAGE,
        component: Panel,
    },
    {
        name: 'Theme.colors',
        component: function () { return React.createElement(SwatchList, null); },
    },
];
var ThemeTest = function () {
    var status = {
        win32Status: 'Beta',
        uwpStatus: 'Experimental',
        iosStatus: 'Experimental',
        macosStatus: 'Experimental',
        androidStatus: 'Backlog',
    };
    var 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_1.Test, { name: "Theme Test", description: description, sections: themeSections, status: status });
};
exports.ThemeTest = ThemeTest;
//# sourceMappingURL=ThemeTest.js.map