import { __assign } from "tslib";
import * as React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { Text, ToggleButton } from '@fluentui/react-native';
import { createAliasTokens } from '@fluentui-react-native/default-theme';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
import { useTheme } from '@fluentui-react-native/theme-types';
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
import Svg, { G, Path } from 'react-native-svg';
import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '../../../../E2E/src/ColorTokens/consts';
import { commonTestStyles } from '../Common/styles';
import { testProps } from '../Common/TestProps';
import { Test } from '../Test';
var getThemedStyles = themedStyleSheet(function (theme) {
    return {
        swatch: {
            width: 80,
            height: 20,
            marginRight: 5,
            borderWidth: 2,
            borderColor: theme.colors.bodyText,
        },
    };
});
var styles = 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(useTheme());
    return (React.createElement(View, { style: styles.swatchItem },
        React.createElement(View, __assign({ style: [getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch] }, testProps(COLORTOKENS_TEST_COMPONENT))),
        React.createElement(View, { style: styles.colorDescriptionStyle },
            React.createElement(Text, { style: styles.colorDescriptionNamePadding }, p.colorName),
            React.createElement(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 = useTheme();
    var isOfficeTheme = theme.name === 'White' ||
        theme.name === 'Colorful' ||
        theme.name === 'DarkGray' ||
        theme.name === 'Black' ||
        theme.name === 'HighContrast';
    var aliasColorTokens = isOfficeTheme
        ? createOfficeAliasTokens(theme.name)
        : createAliasTokens(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(View, { style: commonTestStyles.view },
        React.createElement(View, { style: styles.stackStyle }, aliasColorTokensAsArray.map(function (item) { return renderSwatch(item); }))));
};
/// Global color tokens - neutral
var globalNeutralColorNamesSortedDarkToLight = Object.keys(globalTokens.color)
    .filter(function (globalColorName) { return globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white'; })
    .sort(function (color1, color2) {
    var color1hex = globalTokens.color[color1];
    var color2hex = 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: globalTokens.color[colorName],
    };
});
var GlobalNeutralColorTokensSwatchList = function () {
    var renderSwatch = React.useCallback(getSwatch, []);
    return (React.createElement(View, { style: commonTestStyles.view },
        React.createElement(View, { style: styles.stackStyle }, globalNeutralColorTokensAsArray.map(function (item) { return renderSwatch(item); }))));
};
/// Global color tokens - shared
var globalSharedColorNames = Object.keys(globalTokens.color).filter(function (key) { return globalTokens.color[key].primary !== undefined; });
var globalSharedColorVariantsSortedDarkToLight = Object.keys(globalTokens.color.red).sort(function (color1, color2) {
    var color1hex = globalTokens.color.red[color1];
    var color2hex = 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: 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(Svg, null,
            React.createElement(G, null,
                React.createElement(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 = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
    return (React.createElement(View, { style: styles.toggleButtonAreaPadding },
        React.createElement(View, { style: styles.statusView },
            React.createElement(Text, { variant: "subheaderStandard" }, "Show color tokens"),
            React.createElement(ToggleButton, { iconOnly: true, icon: toggleIconProps, onClick: function () { return setShowGlobalSharedColors(!showGlobalSharedColors); } })),
        showGlobalSharedColors && (React.createElement(View, { style: commonTestStyles.view },
            React.createElement(View, { style: styles.stackStyle }, globalSharedColorTokensAsArray.map(function (item) { return renderSwatch(item); }))))));
};
var themeSections = [
    {
        name: 'Alias Color Tokens',
        testID: 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); },
    },
];
export var ColorTokensTest = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Backlog',
        androidStatus: 'Production',
    };
    var description = 'Alias and global tokens given from token pipeline. Used to style components.';
    return React.createElement(Test, { name: "Color Tokens Test", description: description, sections: themeSections, status: status });
};
//# sourceMappingURL=ColorTokenTest.js.map