import * as tslib_1 from "tslib";
import * as React from 'react';
import { classNamesFunction } from '../../Utilities';
import { loadTheme } from '../../Styling';
import { ComponentPage, PageMarkdown } from '@uifabric/example-app-base';
import { defaultPalette, defaultSemanticColors } from './defaultTheme';
import { getStyles } from './ThemePage.styles';
import { Callout } from '../Callout';
import { DetailsList, DetailsListLayoutMode } from '../../DetailsList';
import { SelectionMode } from '../../Selection';
import { ColorPicker } from '../ColorPicker';
var getClassNames = classNamesFunction();
var ThemePage = /** @class */ (function (_super) {
    tslib_1.__extends(ThemePage, _super);
    function ThemePage(props) {
        var _this = _super.call(this, props) || this;
        _this._colorList = function (colors, list) {
            var classNames = getClassNames(getStyles);
            var colorPickerProps = _this.state.colorPickerProps;
            return (React.createElement("div", null,
                React.createElement(DetailsList, { items: colors, selectionMode: SelectionMode.none, layoutMode: 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: classNames.colorSwatch, "data-is-focusable": "true", onClick: _this._onSwatchClicked.bind(_this, item, index, list) },
                                React.createElement("span", { className: classNames.swatch, style: { backgroundColor: item.value } }),
                                React.createElement("span", { className: classNames.colorValue }, item.value))); }
                        },
                        {
                            key: 'desc',
                            name: 'Description',
                            fieldName: 'description',
                            minWidth: 90
                        }
                    ] }),
                colorPickerProps && (React.createElement(Callout, { isBeakVisible: false, gapSpace: 10, target: colorPickerProps.targetElement, onDismiss: _this._onPickerDismiss },
                    React.createElement(ColorPicker, { color: colorPickerProps.value, onColorChanged: _this._onColorChanged.bind(_this, colorPickerProps.index) })))));
        };
        _this._onPickerDismiss = _this._onPickerDismiss.bind(_this);
        _this.state = {
            palette: defaultPalette,
            semanticColors: defaultSemanticColors
        };
        return _this;
    }
    ThemePage.prototype.render = function () {
        // Don't mutate state to display lists
        var palette = this.state.palette.slice();
        var semanticColors = this.state.semanticColors.slice();
        return (React.createElement(ComponentPage, { title: "Themes", componentName: "ThemeExample", componentUrl: "https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Theme", overview: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Theme/docs/ThemesOverview.md')), otherSections: [
                {
                    title: 'Default Palette',
                    section: this._colorList(palette, 'palette')
                },
                {
                    title: 'Default Semantic Colors',
                    section: this._colorList(semanticColors, 'semanticColors')
                }
            ], isHeaderVisible: this.props.isHeaderVisible }));
    };
    ThemePage.prototype._onSwatchClicked = function (item, index, list, ev) {
        this.setState({
            colorPickerProps: {
                targetElement: ev.currentTarget.children[0],
                value: item.value,
                index: index
            },
            activeList: list
        });
    };
    ThemePage.prototype._onColorChanged = function (index, newColor) {
        var activeList = this.state.activeList;
        var partialPalette = {};
        var partialSemanticColors = {};
        if (activeList === 'palette') {
            var palette = this.state.palette.slice();
            var paletteColor = palette[index];
            paletteColor.value = newColor;
            palette[index] = paletteColor;
            for (var i = 0; i < palette.length; i++) {
                palette[palette[i].key] = palette[i].value;
            }
        }
        else if (activeList === 'semanticColors') {
            var semanticColors = this.state.semanticColors.slice();
            var semanticColor = semanticColors[index];
            semanticColor.value = newColor;
            semanticColors[index] = semanticColor;
            for (var i = 0; i < semanticColors.length; i++) {
                semanticColors[semanticColors[i].key] = semanticColors[i].value;
            }
        }
        else {
            this.setState({ activeList: undefined });
            return undefined;
        }
        this.setState({ activeList: undefined });
        var partialTheme = tslib_1.__assign({}, partialPalette, partialSemanticColors);
        loadTheme({ palette: partialTheme });
    };
    ThemePage.prototype._onPickerDismiss = function () {
        this.setState({
            colorPickerProps: undefined
        });
    };
    return ThemePage;
}(React.Component));
export { ThemePage };
//# sourceMappingURL=ThemePage.js.map