"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OverridableVariable = exports.UIThemeObserverAttribute = void 0;
var aurelia_framework_1 = require("aurelia-framework");
var color_1 = require("../utils/color");
var UIThemeObserverAttribute = exports.UIThemeObserverAttribute = (function () {
    function UIThemeObserverAttribute(taskQueue) {
        this.taskQueue = taskQueue;
        this.whiteColor = (0, color_1.color)("white");
        this.blackColor = (0, color_1.color)("black");
        this.overridableVariables = new Array();
    }
    UIThemeObserverAttribute.prototype.attached = function () {
        var e_1, _a;
        var _this = this;
        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
        var documentStyle = getComputedStyle(document.documentElement);
        this.primaryColor = (0, color_1.color)((_c = (_b = documentStyle.getPropertyValue("--primary")) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : this.whiteColor);
        this.secondaryColor = (0, color_1.color)((_e = (_d = documentStyle.getPropertyValue("--secondary")) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : this.whiteColor);
        this.baseTheme = (0, color_1.color)((_g = (_f = documentStyle.getPropertyValue("--base-theme")) === null || _f === void 0 ? void 0 : _f.trim()) !== null && _g !== void 0 ? _g : this.whiteColor);
        this.baseInvert = (0, color_1.color)((_j = (_h = documentStyle.getPropertyValue("--base-invert")) === null || _h === void 0 ? void 0 : _h.trim()) !== null && _j !== void 0 ? _j : this.blackColor);
        this.baseComponentBg = (0, color_1.color)((_l = (_k = documentStyle.getPropertyValue("--base-component-bg")) === null || _k === void 0 ? void 0 : _k.trim()) !== null && _l !== void 0 ? _l : this.whiteColor);
        this.menuHoverBg = this.baseTheme.mix(this.primaryColor, 0.5);
        this.overridableVariables.push(new OverridableVariable("sidebar-resizer", function () { return _this.baseTheme.mix(_this.primaryColor, 0.7).hex(); }));
        this.overridableVariables.push(new OverridableVariable("scrollbar-bg", function () { return _this.baseComponentBg.mix(_this.primaryColor, 0.25).hex(); }));
        this.overridableVariables.push(new OverridableVariable("scrollbar-bg-hover", function () { return _this.baseTheme.mix(_this.primaryColor, 0.6).hex(); }));
        this.overridableVariables.push(new OverridableVariable("menu-hover-bg", function () { return _this.menuHoverBg.hex(); }));
        this.overridableVariables.push(new OverridableVariable("menu-hover-color", function () { return _this.menuHoverBg.textColor().hex(); }));
        this.overridableVariables.push(new OverridableVariable("menu-active-color", function () { return _this.primaryColor.hex(); }));
        this.overridableVariables.push(new OverridableVariable("menu-active-border-color", function () { return _this.blackColor.mix("gray", 0.05).mix(_this.primaryColor, 0.5).hex(); }));
        this.overridableVariables.push(new OverridableVariable("divider-bg", function () { return _this.primaryColor.alpha(0.5).hex("rgba"); }));
        this.overridableVariables.push(new OverridableVariable("tree-hover-bg", function () { return _this.baseTheme.mix(_this.secondaryColor, 0.5).hex(); }));
        this.overridableVariables.push(new OverridableVariable("tooltip-bg", function () { return _this.baseTheme.mix(_this.primaryColor, 0.7).hex(); }));
        this.overridableVariables.push(new OverridableVariable("dlg-header-active-bg", function () { return _this.baseTheme.mix(_this.primaryColor, 0.8).hex(); }));
        this.overridableVariables.push(new OverridableVariable("input-focus-border-color", function () { return _this.baseTheme.mix(_this.secondaryColor, 0.25).hex(); }));
        this.overridableVariables.push(new OverridableVariable("list-item-hover-bg", function () { return _this.primaryColor.alpha(0.15).hex("rgba"); }));
        this.overridableVariables.push(new OverridableVariable("list-item-hover-color", function () { return _this.primaryColor.hex(); }));
        this.overridableVariables.push(new OverridableVariable("list-item-active-bg", function () { return _this.primaryColor.hex(); }));
        this.overridableVariables.push(new OverridableVariable("list-item-active-color", function () { return _this.primaryColor.textColor().hex(); }));
        this.overridableVariables.push(new OverridableVariable("ux-dialog-background-header", function () { return _this.primaryColor.hex(); }));
        this.overridableVariables.push(new OverridableVariable("ux-dialog-color-header", function () { return _this.primaryColor.textColor().hex(); }));
        try {
            for (var _o = __values(this.overridableVariables), _p = _o.next(); !_p.done; _p = _o.next()) {
                var overridableVariable = _p.value;
                try {
                    var actualColor = (0, color_1.color)((_m = documentStyle.getPropertyValue("--" + overridableVariable.variableNameCSS)) === null || _m === void 0 ? void 0 : _m.trim());
                    overridableVariable.colorOverride = actualColor.hex();
                }
                catch (_q) {
                }
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (_p && !_p.done && (_a = _o.return)) _a.call(_o);
            }
            finally { if (e_1) throw e_1.error; }
        }
        this.taskQueue.queueMicroTask(function () {
            _this.mutationObserver = new MutationObserver(function () { return _this.themeChanged(); });
            _this.mutationObserver.observe(document.documentElement, {
                "attributes": true,
                "attributeFilter": ["style"]
            });
        });
        this.themeChanged(true);
    };
    UIThemeObserverAttribute.prototype.detached = function () {
        var _a;
        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    };
    UIThemeObserverAttribute.prototype.themeChanged = function (force) {
        var e_2, _a, e_3, _b, e_4, _c;
        var _this = this;
        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
        if (force === void 0) { force = false; }
        try {
            var documentStyle = getComputedStyle(document.documentElement);
            var primary_1 = (_d = documentStyle.getPropertyValue("--primary")) === null || _d === void 0 ? void 0 : _d.trim();
            var secondary_1 = (_e = documentStyle.getPropertyValue("--secondary")) === null || _e === void 0 ? void 0 : _e.trim();
            if (force || (this.oldPrimaryColor != primary_1 && this.oldSecondaryColor != secondary_1)) {
                this.primaryColor = (0, color_1.color)(primary_1 !== null && primary_1 !== void 0 ? primary_1 : this.whiteColor);
                this.secondaryColor = (0, color_1.color)(secondary_1 !== null && secondary_1 !== void 0 ? secondary_1 : this.whiteColor);
                this.tertiaryColor = this.blackColor.mix(this.primaryColor, 0.5);
                document.body.style.setProperty("--tertiary", this.tertiaryColor.hex());
                this.baseTheme = (0, color_1.color)((_g = (_f = documentStyle.getPropertyValue("--base-theme")) === null || _f === void 0 ? void 0 : _f.trim()) !== null && _g !== void 0 ? _g : this.whiteColor);
                this.baseInvert = (0, color_1.color)((_j = (_h = documentStyle.getPropertyValue("--base-invert")) === null || _h === void 0 ? void 0 : _h.trim()) !== null && _j !== void 0 ? _j : this.blackColor);
                this.baseComponentBg = (0, color_1.color)((_l = (_k = documentStyle.getPropertyValue("--base-component-bg")) === null || _k === void 0 ? void 0 : _k.trim()) !== null && _l !== void 0 ? _l : this.whiteColor);
                this.menuHoverBg = this.baseTheme.mix(this.primaryColor, 0.5);
                var themes = [{ name: "primary", color: this.primaryColor }, { name: "secondary", color: this.secondaryColor }, { name: "tertiary", color: this.tertiaryColor }];
                document.body.style.setProperty("--primary-reverse", this.primaryColor.textColor().hex());
                document.body.style.setProperty("--secondary-reverse", this.secondaryColor.textColor().hex());
                document.body.style.setProperty("--tertiary-reverse", this.tertiaryColor.textColor().hex());
                this.btnBg = (0, color_1.color)((_o = (_m = documentStyle.getPropertyValue("--btn-bg")) === null || _m === void 0 ? void 0 : _m.trim()) !== null && _o !== void 0 ? _o : this.whiteColor);
                var setVaribleByTheme = function (color, colorName) {
                    document.body.style.setProperty("--" + colorName + "-base-theme-10", _this.baseTheme.mix(color, 0.1).hex());
                    document.body.style.setProperty("--" + colorName + "-white-10", _this.whiteColor.mix(color, 0.1).hex());
                    document.body.style.setProperty("--" + colorName + "-white-50", _this.whiteColor.mix(color, 0.5).hex());
                    document.body.style.setProperty("--" + colorName + "-white-75", _this.whiteColor.mix(color, 0.75).hex());
                    document.body.style.setProperty("--" + colorName + "-black-40", _this.blackColor.mix(color, 0.4).hex());
                    document.body.style.setProperty("--" + colorName + "-btn-bg-90", _this.btnBg.mix(color, 0.9).hex());
                };
                try {
                    for (var themes_1 = __values(themes), themes_1_1 = themes_1.next(); !themes_1_1.done; themes_1_1 = themes_1.next()) {
                        var theme = themes_1_1.value;
                        setVaribleByTheme(theme.color, theme.name);
                    }
                }
                catch (e_2_1) { e_2 = { error: e_2_1 }; }
                finally {
                    try {
                        if (themes_1_1 && !themes_1_1.done && (_a = themes_1.return)) _a.call(themes_1);
                    }
                    finally { if (e_2) throw e_2.error; }
                }
                try {
                    for (var _q = __values(this.overridableVariables), _r = _q.next(); !_r.done; _r = _q.next()) {
                        var overridableVariable = _r.value;
                        document.body.style.setProperty("--" + overridableVariable.variableNameCSS, (_p = overridableVariable.colorOverride) !== null && _p !== void 0 ? _p : overridableVariable.color());
                    }
                }
                catch (e_3_1) { e_3 = { error: e_3_1 }; }
                finally {
                    try {
                        if (_r && !_r.done && (_b = _q.return)) _b.call(_q);
                    }
                    finally { if (e_3) throw e_3.error; }
                }
                for (var index = 5; index < 100; index += 5) {
                    var indexString = index.toLocaleString(undefined, {
                        minimumIntegerDigits: 2,
                    });
                    try {
                        for (var themes_2 = (e_4 = void 0, __values(themes)), themes_2_1 = themes_2.next(); !themes_2_1.done; themes_2_1 = themes_2.next()) {
                            var theme = themes_2_1.value;
                            document.body.style.setProperty("--" + theme.name + "-" + indexString, theme.color.alpha(index / 100).hex("rgba"));
                            document.body.style.setProperty("--" + theme.name + "-lighten-" + indexString, theme.color.brighter(index / 100).hex("rgba"));
                            document.body.style.setProperty("--" + theme.name + "-darken-" + indexString, theme.color.darker(index / 100).hex("rgba"));
                        }
                    }
                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
                    finally {
                        try {
                            if (themes_2_1 && !themes_2_1.done && (_c = themes_2.return)) _c.call(themes_2);
                        }
                        finally { if (e_4) throw e_4.error; }
                    }
                }
            }
            this.taskQueue.queueTask(function () {
                _this.oldPrimaryColor = primary_1;
                _this.oldSecondaryColor = secondary_1;
            });
        }
        catch (_s) { }
    };
    UIThemeObserverAttribute = __decorate([
        aurelia_framework_1.autoinject,
        (0, aurelia_framework_1.customAttribute)("ui-theme-observer"),
        __metadata("design:paramtypes", [aurelia_framework_1.TaskQueue])
    ], UIThemeObserverAttribute);
    return UIThemeObserverAttribute;
}());
var OverridableVariable = (function () {
    function OverridableVariable(variableNameCSS, color) {
        this.variableNameCSS = variableNameCSS;
        this.color = color;
    }
    return OverridableVariable;
}());
exports.OverridableVariable = OverridableVariable;

//# sourceMappingURL=ui-theme-observer.js.map
