"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorTokensTest = 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 default_theme_1 = require("@fluentui-react-native/default-theme");
var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
var theme_types_1 = require("@fluentui-react-native/theme-types");
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
var theming_utils_1 = require("@fluentui-react-native/theming-utils");
var win32_theme_1 = require("@fluentui-react-native/win32-theme");
var react_native_svg_1 = tslib_1.__importStar(require("react-native-svg"));
var consts_1 = require("../../../../E2E/src/ColorTokens/consts");
var styles_1 = require("../Common/styles");
var TestProps_1 = require("../Common/TestProps");
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,
    },
    stackStyle: {
        borderWidth: 2,
        padding: 12,
        margin: 8,
    },
    statusView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        margin: 8,
    },
    // Needed to ensure that with the button is toggled on, the top of the newly shown
    // content is visible so the user knows to scroll down
    toggleButtonAreaPadding: { paddingBottom: 10 },
    colorDescriptionStyle: { flexDirection: 'row', flexWrap: 'wrap', flex: 1 },
    colorDescriptionNamePadding: { paddingRight: 5 },
});
var getSwatchColorStyle = function (colorName, colorValue) {
    styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
    return styles[colorName];
};
var ColorToken = function (p) {
    var _a;
    if (p.colorValue === undefined) {
        console.warn('Color token ' + p.colorName + ' is undefined');
    }
    var themedStyles = getThemedStyles((0, theme_types_1.useTheme)());
    return (React.createElement(react_native_1.View, { style: styles.swatchItem },
        React.createElement(react_native_1.View, tslib_1.__assign({ style: [getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch] }, (0, TestProps_1.testProps)(consts_1.COLORTOKENS_TEST_COMPONENT))),
        React.createElement(react_native_1.View, { style: styles.colorDescriptionStyle },
            React.createElement(react_native_2.Text, { style: styles.colorDescriptionNamePadding }, p.colorName),
            React.createElement(react_native_2.Text, null, '(' + ((_a = p.colorValue) === null || _a === void 0 ? void 0 : _a.toString()) + ')'))));
};
var getSwatch = function (item) {
    var colorValue = item.colorValue, colorName = item.colorName;
    return React.createElement(ColorToken, { key: colorName, colorValue: colorValue, colorName: colorName });
};
/// Alias color tokens
var AliasColorTokensSwatchList = function () {
    var theme = (0, theme_types_1.useTheme)();
    var isOfficeTheme = theme.name === 'White' ||
        theme.name === 'Colorful' ||
        theme.name === 'DarkGray' ||
        theme.name === 'Black' ||
        theme.name === 'HighContrast';
    var aliasColorTokens = isOfficeTheme
        ? (0, win32_theme_1.createOfficeAliasTokens)(theme.name)
        : (0, default_theme_1.createAliasTokens)((0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light'));
    var aggregator = React.useCallback(function (colorName) {
        return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
    }, [aliasColorTokens]);
    var flattenArray = React.useCallback(function () {
        return Object.keys(aliasColorTokens).map(aggregator);
    }, [aliasColorTokens, aggregator]);
    var aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
    var renderSwatch = React.useCallback(getSwatch, []);
    return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
        React.createElement(react_native_1.View, { style: styles.stackStyle }, aliasColorTokensAsArray.map(function (item) { return renderSwatch(item); }))));
};
/// Global color tokens - neutral
var globalNeutralColorNamesSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color)
    .filter(function (globalColorName) { return globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white'; })
    .sort(function (color1, color2) {
    var color1hex = theme_tokens_1.globalTokens.color[color1];
    var color2hex = theme_tokens_1.globalTokens.color[color2];
    // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
    // will order the colors from dark to light
    return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
});
var globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map(function (colorName) {
    return {
        colorName: colorName,
        colorValue: theme_tokens_1.globalTokens.color[colorName],
    };
});
var GlobalNeutralColorTokensSwatchList = function () {
    var renderSwatch = React.useCallback(getSwatch, []);
    return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
        React.createElement(react_native_1.View, { style: styles.stackStyle }, globalNeutralColorTokensAsArray.map(function (item) { return renderSwatch(item); }))));
};
/// Global color tokens - shared
var globalSharedColorNames = Object.keys(theme_tokens_1.globalTokens.color).filter(function (key) { return theme_tokens_1.globalTokens.color[key].primary !== undefined; });
var globalSharedColorVariantsSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color.red).sort(function (color1, color2) {
    var color1hex = theme_tokens_1.globalTokens.color.red[color1];
    var color2hex = theme_tokens_1.globalTokens.color.red[color2];
    // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
    // will order the colors from dark to light
    return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
});
var globalSharedColorTokensAsArray = globalSharedColorNames
    .map(function (sharedColorName) {
    return globalSharedColorVariantsSortedDarkToLight.map(function (variant) {
        return {
            colorName: sharedColorName + '.' + variant,
            colorValue: theme_tokens_1.globalTokens.color[sharedColorName][variant],
        };
    });
})
    .reduce(function (accumulator, sharedColor) { return accumulator.concat(sharedColor); });
var GlobalSharedColorTokensSwatchList = function () {
    var renderSwatch = React.useCallback(getSwatch, []);
    var _a = React.useState(false), showGlobalSharedColors = _a[0], setShowGlobalSharedColors = _a[1];
    var toggleSvg = function () {
        var plusPath = 'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
        var minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
        var path = showGlobalSharedColors ? minusPath : plusPath;
        return (React.createElement(react_native_svg_1.default, null,
            React.createElement(react_native_svg_1.G, null,
                React.createElement(react_native_svg_1.Path, { d: path, fill: "black" }))));
    };
    var svgProps = { src: toggleSvg };
    var plusCodepoint = 0x2795;
    var minusCodepoint = 0x2796;
    var fontIconProps = {
        codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
        fontSize: 10,
    };
    var toggleIconProps = react_native_1.Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
    return (React.createElement(react_native_1.View, { style: styles.toggleButtonAreaPadding },
        React.createElement(react_native_1.View, { style: styles.statusView },
            React.createElement(react_native_2.Text, { variant: "subheaderStandard" }, "Show color tokens"),
            React.createElement(react_native_2.ToggleButton, { iconOnly: true, icon: toggleIconProps, onClick: function () { return setShowGlobalSharedColors(!showGlobalSharedColors); } })),
        showGlobalSharedColors && (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.view },
            React.createElement(react_native_1.View, { style: styles.stackStyle }, globalSharedColorTokensAsArray.map(function (item) { return renderSwatch(item); }))))));
};
var themeSections = [
    {
        name: 'Alias Color Tokens',
        testID: consts_1.COLORTOKEN_TESTPAGE,
        component: function () { return React.createElement(AliasColorTokensSwatchList, null); },
    },
    {
        name: 'Global Color Tokens - Neutral Colors',
        component: function () { return React.createElement(GlobalNeutralColorTokensSwatchList, null); },
    },
    {
        name: 'Global Color Tokens - Shared Colors',
        component: function () { return React.createElement(GlobalSharedColorTokensSwatchList, null); },
    },
];
var ColorTokensTest = function () {
    var status = {
        win32Status: 'Beta',
        uwpStatus: 'Backlog',
        iosStatus: 'Experimental',
        macosStatus: 'Backlog',
        androidStatus: 'Experimental',
    };
    var description = 'Alias and global tokens given from token pipeline. Used to style components.';
    return React.createElement(Test_1.Test, { name: "Color Tokens Test", description: description, sections: themeSections, status: status });
};
exports.ColorTokensTest = ColorTokensTest;
//# sourceMappingURL=ColorTokenTest.js.map