import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers } from "tslib";
import * as React from 'react';
import styled from '@emotion/styled';
import { ComboBoxStore, inject, SearchableTableWidget, ColorPickerWidget, PanelButtonWidget, PANEL_CONTENT_PADDING, ScrollableDivCss } from '@journeyapps-labs/reactor-mod';
import { colorRegistry } from './theme-utils';
import { UploadVSIXThemeBtnWidget } from './UploadVSIXThemeBtnWidget';
import * as _ from 'lodash';
import { ChangeEditorThemeAction } from '../actions/ChangeEditorThemeAction';
import { MonacoThemeStore } from '../stores/MonacoThemeStore';
import { aHexToRgba, rgbaToAHex } from '@journeyapps-labs/lib-reactor-utils';
var S;
(function (S) {
    S.Container = styled.div `
    overflow: auto;
    height: 100%;
    padding: ${PANEL_CONTENT_PADDING}px;
    ${ScrollableDivCss};
  `;
    S.Top = styled.div `
    display: flex;
    flex-grow: 1;
  `;
    S.Button = styled(PanelButtonWidget) `
    margin-left: 5px;
  `;
})(S || (S = {}));
export const fromCamelCaseToSentence = _.memoize((word) => _.capitalize(word
    .replace(/([A-Z][a-z]+)/g, ' $1')
    .replace(/([A-Z]{2,})/g, ' $1')
    .replace(/\s{2,}/g, ' ')
    .trim()));
export var ThemeTableColumns;
(function (ThemeTableColumns) {
    ThemeTableColumns["COLOR"] = "color";
    ThemeTableColumns["IDENT"] = "ident";
    ThemeTableColumns["DESC"] = "desc";
})(ThemeTableColumns || (ThemeTableColumns = {}));
let EditorThemePreferencesWidget = (() => {
    var _a, _EditorThemePreferencesWidget_comboBoxStore_accessor_storage, _EditorThemePreferencesWidget_monacoThemeStore_accessor_storage;
    let _classSuper = React.Component;
    let _comboBoxStore_decorators;
    let _comboBoxStore_initializers = [];
    let _comboBoxStore_extraInitializers = [];
    let _monacoThemeStore_decorators;
    let _monacoThemeStore_initializers = [];
    let _monacoThemeStore_extraInitializers = [];
    return _a = class EditorThemePreferencesWidget extends _classSuper {
            get comboBoxStore() { return __classPrivateFieldGet(this, _EditorThemePreferencesWidget_comboBoxStore_accessor_storage, "f"); }
            set comboBoxStore(value) { __classPrivateFieldSet(this, _EditorThemePreferencesWidget_comboBoxStore_accessor_storage, value, "f"); }
            get monacoThemeStore() { return __classPrivateFieldGet(this, _EditorThemePreferencesWidget_monacoThemeStore_accessor_storage, "f"); }
            set monacoThemeStore(value) { __classPrivateFieldSet(this, _EditorThemePreferencesWidget_monacoThemeStore_accessor_storage, value, "f"); }
            constructor(props) {
                super(props);
                _EditorThemePreferencesWidget_comboBoxStore_accessor_storage.set(this, __runInitializers(this, _comboBoxStore_initializers, void 0));
                _EditorThemePreferencesWidget_monacoThemeStore_accessor_storage.set(this, (__runInitializers(this, _comboBoxStore_extraInitializers), __runInitializers(this, _monacoThemeStore_initializers, void 0)));
                this.deleteTheme = (__runInitializers(this, _monacoThemeStore_extraInitializers), () => {
                    this.monacoThemeStore.deleteTheme(this.state.theme);
                });
                this.state = {
                    theme: props.theme,
                    modified: false
                };
            }
            getRGBA(c) {
                if (!c) {
                    return null;
                }
                if (_.isString(c)) {
                    return aHexToRgba(c);
                }
                return c.toString();
            }
            render() {
                var _b;
                return (React.createElement(S.Container, null,
                    React.createElement(SearchableTableWidget, { columns: [
                            {
                                key: ThemeTableColumns.COLOR,
                                display: 'Color',
                                shrink: true,
                                accessor: (cell, row) => {
                                    return (React.createElement(ColorPickerWidget, { color: this.getRGBA(cell) || 'rgba(0,0,0,0)', colorChanged: (color) => {
                                            this.setState({
                                                theme: Object.assign(Object.assign({}, this.state.theme), { theme: Object.assign(Object.assign({}, this.state.theme.theme), { colors: Object.assign(Object.assign({}, this.state.theme.theme.colors), { [row.key]: rgbaToAHex(color) }) }) }),
                                                modified: true
                                            });
                                        } }));
                                }
                            },
                            {
                                key: ThemeTableColumns.IDENT,
                                display: 'ID',
                                shrink: true,
                                noWrap: true,
                                accessorSearch: (cell) => {
                                    return cell;
                                }
                            },
                            {
                                key: ThemeTableColumns.DESC,
                                display: 'Description',
                                accessorSearch: (cell) => {
                                    return cell;
                                }
                            }
                        ], renderGroup: (event) => {
                            return {
                                defaultCollapsed: true,
                                children: fromCamelCaseToSentence(event.groupKey)
                            };
                        }, rows: _.map(colorRegistry.colorSchema.properties, (property, id) => {
                            var _b;
                            if (_.isFunction((_b = colorRegistry.colorsById[id].defaults) === null || _b === void 0 ? void 0 : _b.dark)) {
                                return false;
                            }
                            let group = null;
                            let names = id.split('.');
                            if (names.length > 1) {
                                group = names[0];
                                names.splice(0, 1);
                            }
                            return {
                                key: id,
                                groupKey: group,
                                cells: {
                                    [ThemeTableColumns.COLOR]: this.state.theme.theme.colors[id],
                                    [ThemeTableColumns.IDENT]: names.map((part) => fromCamelCaseToSentence(part)).join(' > '),
                                    [ThemeTableColumns.DESC]: property.description
                                }
                            };
                        }).filter((f) => !!f) },
                        React.createElement(S.Top, null,
                            React.createElement(UploadVSIXThemeBtnWidget, { gotTheme: (theme) => {
                                    this.monacoThemeStore.addTheme(theme);
                                } }),
                            React.createElement(S.Button, Object.assign({}, ChangeEditorThemeAction.get().representAsButton(), { label: this.state.theme.label })),
                            React.createElement(S.Button, { disabled: (_b = this.state.theme) === null || _b === void 0 ? void 0 : _b.system, label: 'Delete theme', action: this.deleteTheme }),
                            React.createElement(S.Button, { disabled: !this.state.modified, label: 'Save', action: () => {
                                    this.props.save(this.state.theme);
                                    this.setState({
                                        modified: false
                                    });
                                } })))));
            }
        },
        _EditorThemePreferencesWidget_comboBoxStore_accessor_storage = new WeakMap(),
        _EditorThemePreferencesWidget_monacoThemeStore_accessor_storage = new WeakMap(),
        (() => {
            var _b;
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create((_b = _classSuper[Symbol.metadata]) !== null && _b !== void 0 ? _b : null) : void 0;
            _comboBoxStore_decorators = [inject(ComboBoxStore)];
            _monacoThemeStore_decorators = [inject(MonacoThemeStore)];
            __esDecorate(_a, null, _comboBoxStore_decorators, { kind: "accessor", name: "comboBoxStore", static: false, private: false, access: { has: obj => "comboBoxStore" in obj, get: obj => obj.comboBoxStore, set: (obj, value) => { obj.comboBoxStore = value; } }, metadata: _metadata }, _comboBoxStore_initializers, _comboBoxStore_extraInitializers);
            __esDecorate(_a, null, _monacoThemeStore_decorators, { kind: "accessor", name: "monacoThemeStore", static: false, private: false, access: { has: obj => "monacoThemeStore" in obj, get: obj => obj.monacoThemeStore, set: (obj, value) => { obj.monacoThemeStore = value; } }, metadata: _metadata }, _monacoThemeStore_initializers, _monacoThemeStore_extraInitializers);
            if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        })(),
        _a;
})();
export { EditorThemePreferencesWidget };
//# sourceMappingURL=EditorThemePreferencesWidget.js.map