define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Styling", "@uifabric/example-app-base", "./defaultTheme", "office-ui-fabric-react/lib/Callout", "office-ui-fabric-react/lib/DetailsList", "office-ui-fabric-react/lib/Selection", "office-ui-fabric-react/lib/ColorPicker", "./ThemePage.scss"], function (require, exports, tslib_1, React, Styling_1, example_app_base_1, defaultTheme_1, Callout_1, DetailsList_1, Selection_1, ColorPicker_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ThemeCodeExample = require('!raw-loader!office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx');
    var ThemePage = /** @class */ (function (_super) {
        tslib_1.__extends(ThemePage, _super);
        function ThemePage(props) {
            var _this = _super.call(this, props) || this;
            _this._createDetailsListRef = function (component) {
                _this._list = component;
            };
            _this._onPickerDismiss = _this._onPickerDismiss.bind(_this);
            _this.state = {
                colors: Object.keys(defaultTheme_1.defaultTheme).map(function (variableName) { return ({
                    key: variableName,
                    name: variableName,
                    value: defaultTheme_1.defaultTheme[variableName],
                    description: '',
                    colorPickerProps: undefined
                }); })
            };
            return _this;
        }
        ThemePage.prototype.render = function () {
            var _this = this;
            var _a = this.state, colors = _a.colors, colorPickerProps = _a.colorPickerProps;
            return (React.createElement("div", { className: 'Themes' },
                React.createElement("h1", { className: Styling_1.FontClassNames.xxLarge }, "Themes"),
                React.createElement("p", null, "The entire color palette of the controls are themeable. We provide a set of sensible defaults, but you can override all colors individually."),
                React.createElement("p", null,
                    "To override the themes, you need to call ",
                    React.createElement("span", { className: 'code' }, "loadTheme()"),
                    " with the appropriate set of overrides:"),
                React.createElement(example_app_base_1.Highlight, { className: 'typescript' }, ThemeCodeExample),
                React.createElement("h1", { className: Styling_1.FontClassNames.xLarge }, "Define a theme"),
                React.createElement("div", null,
                    React.createElement(DetailsList_1.DetailsList, { ref: this._createDetailsListRef, items: colors, selectionMode: Selection_1.SelectionMode.none, layoutMode: DetailsList_1.DetailsListLayoutMode.fixedColumns, columns: [
                            {
                                key: 'name',
                                name: 'Name',
                                fieldName: 'name',
                                minWidth: 150,
                                maxWidth: 150
                            },
                            {
                                key: 'color',
                                name: 'Color',
                                fieldName: 'value',
                                minWidth: 200,
                                onRender: function (item, index) { return (React.createElement("div", { className: 'ThemePage-colorSwatch', "data-is-focusable": 'true', onClick: _this._onSwatchClicked.bind(_this, item, index) },
                                    React.createElement("span", { className: 'ThemePage-swatch', style: { backgroundColor: item.value } }),
                                    React.createElement("span", { className: 'ThemePage-colorValue' }, item.value))); }
                            },
                            {
                                key: 'desc',
                                name: 'Description',
                                fieldName: 'description',
                                minWidth: 90
                            }
                        ] }),
                    colorPickerProps && (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 10, target: colorPickerProps.targetElement, onDismiss: this._onPickerDismiss },
                        React.createElement(ColorPicker_1.ColorPicker, { color: colorPickerProps.value, onColorChanged: this._onColorChanged.bind(this, colorPickerProps.index) }))))));
        };
        ThemePage.prototype._onSwatchClicked = function (item, index, ev) {
            this.setState({
                colorPickerProps: {
                    targetElement: ev.currentTarget.children[0],
                    value: item.value,
                    index: index
                }
            });
        };
        ThemePage.prototype._onColorChanged = function (index, newColor) {
            var colors = this.state.colors;
            var color = colors[index];
            var palette = {};
            color.value = newColor;
            for (var i = 0; i < colors.length; i++) {
                var themeColor = colors[i];
                palette[themeColor.key] = themeColor.value;
            }
            Styling_1.loadTheme({ palette: palette });
            // The theme has changed values, but color state is the same. Force an update on the list.
            this._list.forceUpdate();
        };
        ThemePage.prototype._onPickerDismiss = function () {
            this.setState({
                colorPickerProps: undefined
            });
        };
        return ThemePage;
    }(React.Component));
    exports.ThemePage = ThemePage;
});
//# sourceMappingURL=ThemePage.js.map