import { __assign, __rest } from "tslib";
import * as React from 'react';
import { TinyColor } from '@ctrl/tinycolor';
import { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, } from '@fluentui/react-theme';
import { ColorRampItem } from '../components/ColorRamp';
// FIXME: hardcoded theme
var theme = {
    light: teamsLightTheme,
    dark: teamsDarkTheme,
    highContrast: teamsHighContrastTheme,
};
export default {
    title: 'Fluent UI Theme/Alias/Colors',
};
var buttonStyle = function (_a) {
    var active = _a.active;
    return ({
        position: 'relative',
        verticalAlign: 'middle',
        padding: 0,
        margin: 0,
        width: 40,
        height: 40,
        border: 'none',
        boxShadow: active ? '0 0 0 1px white, 0 0 0 2px black' : 'none',
        borderRadius: 0,
        outline: 'none ',
        zIndex: active ? 2 : 1,
    });
};
var ColorButton = function (_a) {
    var _b = _a.style, style = _b === void 0 ? {} : _b, color = _a.color, active = _a.active, setPreviewColor = _a.setPreviewColor, setColor = _a.setColor, rest = __rest(_a, ["style", "color", "active", "setPreviewColor", "setColor"]);
    return (React.createElement("button", __assign({ style: __assign(__assign({}, style), buttonStyle({ active: active })), onClick: function () {
            setColor(color);
            setPreviewColor(null);
        }, onMouseEnter: function () { return setPreviewColor(color); }, onMouseLeave: function () { return setPreviewColor(null); } }, rest)));
};
export var AliasColors = function () {
    var _a = React.useState('neutral'), color = _a[0], setColor = _a[1];
    var _b = React.useState(null), previewColor = _b[0], setPreviewColor = _b[1];
    var COLUMN_WIDTH = 250;
    var activeColor = previewColor || color;
    return (React.createElement(React.Fragment, null,
        React.createElement("div", null,
            React.createElement("h2", { style: { color: previewColor ? '#888' : '#000' } }, activeColor),
            React.createElement(ColorButton, { color: "neutral", active: color === 'neutral', setColor: setColor, setPreviewColor: setPreviewColor, style: {
                    background: theme.dark.alias.color.neutral.neutralBackground1,
                    color: theme.dark.alias.color.neutral.neutralForeground1,
                } }),
            React.createElement(ColorButton, { color: "subtle", active: color === 'subtle', setColor: setColor, setPreviewColor: setPreviewColor }, "G"),
            React.createElement(ColorButton, { color: "transparent", active: color === 'transparent', setColor: setColor, setPreviewColor: setPreviewColor }, "T"),
            React.createElement(ColorButton, { color: "brand", active: color === 'brand', setColor: setColor, setPreviewColor: setPreviewColor, style: {
                    background: theme.light.global.palette.brand.primary,
                    color: theme.light.global.palette.brand[new TinyColor(theme.light.global.palette.brand.primary).isDark() ? 'tint60' : 'shade50'],
                } }, "B"),
            Object.keys(theme.light.global.palette)
                // TODO: We iterate global.palette to show color swatches.
                //       The selected swatch then is used to populate the alias grid.
                //       But, global.palette has 'grey' and there is no alias.color.grey so it throws.
                //       Filtering grey out here, but this means our structure is wrong.
                .filter(function (key) { return key !== 'grey' && key !== 'brand'; })
                .map(function (colorName) { return (React.createElement(ColorButton, { key: colorName, color: colorName, active: color === colorName, setColor: setColor, setPreviewColor: setPreviewColor, style: {
                    background: theme.light.global.palette[colorName].primary,
                    color: theme.light.global.palette[colorName][new TinyColor(theme.light.global.palette[colorName].primary).isDark() ? 'tint60' : 'shade50'],
                } })); })),
        React.createElement("div", null,
            React.createElement("div", { style: { display: 'flex' } },
                React.createElement("h3", { style: { flex: "0 0 " + COLUMN_WIDTH + "px", padding: '1em', margin: 0 } }, "Design Token"),
                React.createElement("h3", { style: { flex: "0 0 " + COLUMN_WIDTH + "px", padding: '1em', margin: 0 } }, "Light"),
                React.createElement("h3", { style: { flex: "0 0 " + COLUMN_WIDTH + "px", padding: '1em', margin: 0 } }, "Dark"),
                React.createElement("h3", { style: { flex: "0 0 " + COLUMN_WIDTH + "px", padding: '1em', margin: 0 } }, "High Contrast")),
            Object.keys(theme.light.alias.color[activeColor]).map(function (name) { return (React.createElement("div", { key: name, style: { display: 'flex' } },
                React.createElement("div", { style: { flex: "0 0 " + COLUMN_WIDTH + "px", padding: '1em', fontWeight: 'bold' } }, name),
                React.createElement(ColorRampItem, { value: theme.light.alias.color[activeColor][name] }),
                React.createElement(ColorRampItem, { value: theme.dark.alias.color[activeColor][name] }),
                React.createElement(ColorRampItem, { value: theme.highContrast.alias.color[activeColor][name] }))); }))));
};
AliasColors.args = {};
//# sourceMappingURL=AliasColor.stories.js.map