"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorTokensTest = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const default_theme_1 = require("@fluentui-react-native/default-theme");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
const theme_types_1 = require("@fluentui-react-native/theme-types");
const themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
const theming_utils_1 = require("@fluentui-react-native/theming-utils");
const win32_theme_1 = require("@fluentui-react-native/win32-theme");
const react_native_svg_1 = __importStar(require("react-native-svg"));
const styles_1 = require("../Common/styles");
const TestProps_1 = require("../Common/TestProps");
const Test_1 = require("../Test");
const getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)((theme) => {
    return {
        swatch: {
            width: 80,
            height: 20,
            marginRight: 5,
            borderWidth: 2,
            borderColor: theme.colors.bodyText,
        },
    };
});
const 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 },
});
const getSwatchColorStyle = (colorName, colorValue) => {
    styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
    return styles[colorName];
};
const ColorToken = (p) => {
    if (p.colorValue === undefined) {
        console.warn('Color token ' + p.colorName + ' is undefined');
    }
    const 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.colorName, p.colorValue), themedStyles.swatch], ...(0, TestProps_1.testProps)(e2e_testing_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, '(' + p.colorValue?.toString() + ')'))));
};
const getSwatch = (item) => {
    const { colorValue, colorName } = item;
    return React.createElement(ColorToken, { key: colorName, colorValue: colorValue, colorName: colorName });
};
/// Alias color tokens
const AliasColorTokensSwatchList = () => {
    const theme = (0, theme_types_1.useTheme)();
    const isOfficeTheme = theme.name === 'White' ||
        theme.name === 'Colorful' ||
        theme.name === 'DarkGray' ||
        theme.name === 'Black' ||
        theme.name === 'HighContrast';
    const aliasColorTokens = isOfficeTheme
        ? (0, win32_theme_1.createOfficeAliasTokens)(theme.name)
        : (0, default_theme_1.createAliasTokens)((0, theming_utils_1.getCurrentAppearance)(theme.host.appearance, 'light'));
    const aggregator = React.useCallback((colorName) => {
        return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
    }, [aliasColorTokens]);
    const flattenArray = React.useCallback(() => {
        return Object.keys(aliasColorTokens).map(aggregator);
    }, [aliasColorTokens, aggregator]);
    const aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
    const 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((item) => renderSwatch(item)))));
};
/// Global color tokens - neutral
const globalNeutralColorNamesSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color)
    .filter((globalColorName) => globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white')
    .sort((color1, color2) => {
    const color1hex = theme_tokens_1.globalTokens.color[color1];
    const 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;
});
const globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map((colorName) => {
    return {
        colorName: colorName,
        colorValue: theme_tokens_1.globalTokens.color[colorName],
    };
});
const GlobalNeutralColorTokensSwatchList = () => {
    const 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((item) => renderSwatch(item)))));
};
/// Global color tokens - shared
const globalSharedColorNames = Object.keys(theme_tokens_1.globalTokens.color).filter((key) => theme_tokens_1.globalTokens.color[key].primary !== undefined);
const globalSharedColorVariantsSortedDarkToLight = Object.keys(theme_tokens_1.globalTokens.color.red).sort((color1, color2) => {
    const color1hex = theme_tokens_1.globalTokens.color.red[color1];
    const 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;
});
const globalSharedColorTokensAsArray = globalSharedColorNames
    .map((sharedColorName) => {
    return globalSharedColorVariantsSortedDarkToLight.map((variant) => {
        return {
            colorName: sharedColorName + '.' + variant,
            colorValue: theme_tokens_1.globalTokens.color[sharedColorName][variant],
        };
    });
})
    .reduce((accumulator, sharedColor) => accumulator.concat(sharedColor));
const GlobalSharedColorTokensSwatchList = () => {
    const renderSwatch = React.useCallback(getSwatch, []);
    const [showGlobalSharedColors, setShowGlobalSharedColors] = React.useState(false);
    const toggleSvg = () => {
        const 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';
        const 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';
        const 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" }))));
    };
    const svgProps = { src: toggleSvg };
    const plusCodepoint = 0x2795;
    const minusCodepoint = 0x2796;
    const fontIconProps = {
        codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
        fontSize: 10,
    };
    const 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: () => 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((item) => renderSwatch(item)))))));
};
const themeSections = [
    {
        name: 'Alias Color Tokens',
        testID: e2e_testing_1.COLORTOKEN_TESTPAGE,
        component: () => React.createElement(AliasColorTokensSwatchList, null),
    },
    {
        name: 'Global Color Tokens - Neutral Colors',
        component: () => React.createElement(GlobalNeutralColorTokensSwatchList, null),
    },
    {
        name: 'Global Color Tokens - Shared Colors',
        component: () => React.createElement(GlobalSharedColorTokensSwatchList, null),
    },
];
const ColorTokensTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Backlog',
        androidStatus: 'Production',
    };
    const 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