"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const addListener_1 = require("../../../../client/addListener");
const context_1 = require("../../../../client/context");
const custom_1 = require("../../../../client/event/custom");
const html_1 = require("../../../../client/html");
const renderFrame_1 = require("../../../../client/renderFrame");
exports.DEFAULT_STYLE = {
    top: '0',
    width: '100%',
    height: '100%',
    overflow: 'auto',
    zIndex: '0',
};
class Frame extends html_1.default {
    constructor($props, $system) {
        super($props, $system, $system.api.document.createElement('div'), exports.DEFAULT_STYLE);
        this._refresh_sub_context_disabled = () => {
            var _a;
            const { disabled } = this.$props;
            if (disabled === undefined) {
                const { $disabled } = (_a = this.$context) !== null && _a !== void 0 ? _a : {};
                if ($disabled) {
                    (0, context_1.disableContext)(this.$$context);
                }
                else {
                    (0, context_1.enableContext)(this.$$context);
                }
            }
            else if (disabled) {
                (0, context_1.disableContext)(this.$$context);
            }
            else {
                (0, context_1.enableContext)(this.$$context);
            }
        };
        this._get_color = () => {
            const { color: _color, style = {} } = this.$props;
            const { color } = style;
            if (color) {
                return color;
            }
            if (_color) {
                return _color;
            }
            if (this.$context) {
                const { $color } = this.$context;
                return $color;
            }
            return 'currentColor';
        };
        this._refresh_sub_context_color = () => {
            // console.log('Frame', '_refresh_sub_context_color')
            const color = this._get_color();
            (0, context_1.setColor)(this.$$context, color);
        };
        this._on_context_color_changed = () => {
            // console.log('Frame', 'colorchanged')
            this._refresh_sub_context_color();
        };
        this._on_context_theme_changed = () => {
            // console.log('Frame', '_on_context_theme_changed')
            const { $theme } = this.$context;
            (0, context_1.setTheme)(this.$$context, $theme);
        };
        this._on_context_enabled = () => {
            // console.log('Frame', '_on_context_enabled')
            this._refresh_sub_context_disabled();
        };
        this._on_context_disabled = () => {
            // console.log('Frame', '_on_context_disabled')
            this._refresh_sub_context_disabled();
        };
        const { className, color, theme, disabled } = $props;
        this.$element.classList.add('frame');
        if (className !== undefined) {
            this.$element.classList.add(className);
        }
        const $$init = {
            $disabled: true,
        };
        if (color !== undefined) {
            $$init.$color = color;
        }
        this.$$context = (0, renderFrame_1.renderFrame)(this.$system, null, this.$element, $$init);
        this.$propHandler = {
            ...this.$propHandler,
            disabled: (disabled) => {
                this._refresh_sub_context_disabled();
            },
            theme: (theme) => {
                this._refresh_sub_context_color();
            },
            color: (color) => {
                this._refresh_sub_context_color();
            },
        };
    }
    mountChild(child, commit = true) {
        // console.log('Frame', 'mountDescendent', child, commit)
        child.mount(this.$$context, commit);
    }
    onMount() {
        // console.log('Frame', 'onMount')
        (0, context_1.setParent)(this.$$context, this.$context);
        (0, context_1.mount)(this.$$context);
        this._context_unlisten = (0, addListener_1.addListeners)(this.$context, [
            (0, custom_1.makeCustomListener)('enabled', this._on_context_enabled),
            (0, custom_1.makeCustomListener)('disabled', this._on_context_disabled),
            (0, custom_1.makeCustomListener)('themechanged', this._on_context_theme_changed),
            (0, custom_1.makeCustomListener)('colorchanged', this._on_context_color_changed),
        ]);
        this._refresh_sub_context_disabled();
        this._refresh_sub_context_color();
        this._refresh_sub_context_theme();
    }
    _refresh_sub_context_theme() {
        var _a;
        const { $theme } = this.$context;
        const { theme } = this.$props;
        const _theme = (_a = theme !== null && theme !== void 0 ? theme : $theme) !== null && _a !== void 0 ? _a : 'dark';
        (0, context_1.setTheme)(this.$$context, _theme);
    }
    onUnmount() {
        // console.log('Frame', 'onUnmount')
        this._context_unlisten();
        this._context_unlisten = undefined;
        (0, context_1.unmount)(this.$$context);
        (0, context_1.setParent)(this.$$context, null);
    }
}
exports.default = Frame;
//# sourceMappingURL=Component.js.map