"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 element_1 = require("../../../../client/element");
const custom_1 = require("../../../../client/event/custom");
const renderFrame_1 = require("../../../../client/renderFrame");
const style_1 = require("../../../../client/style");
exports.DEFAULT_STYLE = {
    top: '0',
    width: '100%',
    height: '100%',
    overflow: 'auto',
    zIndex: '0',
};
class Frame extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._prop_handler = {
            style: (style = {}) => {
                (0, style_1.default)(this.$element, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
                this._refresh_sub_context_color();
            },
            disabled: (disabled) => {
                this._refresh_sub_context_disabled();
            },
            theme: (theme) => {
                this._refresh_sub_context_color();
            },
            color: (color) => {
                this._refresh_sub_context_color();
            },
        };
        this._refresh_sub_context_disabled = () => {
            const { disabled } = this.$props;
            if (disabled === undefined) {
                const { $disabled } = this.$context;
                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 = () => {
            if (this._manually_changed_color) {
                return;
            }
            // console.log('Frame', '_refresh_sub_context_color', color)
            const color = this._get_color();
            this._prevent_manual_change_color = true;
            (0, context_1.setColor)(this.$$context, color);
            this._prevent_manual_change_color = false;
        };
        this._on_context_color_changed = () => {
            if (this._manually_changed_color) {
                return;
            }
            // console.log('Frame', 'colorchanged')
            this._refresh_sub_context_color();
        };
        this._on_context_theme_changed = () => {
            // console.log('Frame', '_on_context_theme_changed')
            if (this._manually_changed_theme) {
                return;
            }
            const { $theme } = this.$context;
            this._prevent_manual_change_theme = true;
            console.log({ $theme });
            (0, context_1.setTheme)(this.$$context, $theme);
            this._prevent_manual_change_theme = false;
        };
        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();
        };
        this._prevent_manual_change_color = false;
        this._prevent_manual_change_theme = false;
        this._manually_changed_color = false;
        this._manually_changed_theme = false;
        this._on_sub_context_theme_changed = () => {
            if (this._prevent_manual_change_theme) {
                this._prevent_manual_change_theme = false;
                return;
            }
            this._manually_changed_theme = true;
        };
        this._on_sub_context_color_changed = () => {
            if (this._prevent_manual_change_color) {
                this._prevent_manual_change_color = false;
                return;
            }
            this._manually_changed_color = true;
        };
        const { className, style = {}, color, tabIndex, theme, disabled } = $props;
        const $element = this.$system.api.document.createElement('div');
        $element.classList.add('frame');
        (0, style_1.default)($element, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
        if (className !== undefined) {
            $element.classList.add(className);
        }
        if (tabIndex !== undefined) {
            $element.tabIndex = tabIndex;
        }
        this.$element = $element;
        const $$init = {
            $disabled: true,
        };
        if (color !== undefined) {
            $$init.$color = color;
        }
        this.$$context = (0, renderFrame_1.renderFrame)(this.$system, null, $element, $$init);
    }
    onPropChanged(prop, current) {
        this._prop_handler[prop](current);
    }
    mountDescendent(child) {
        // console.log('Frame', 'mountDescendent', child)
        child.mount(this.$$context);
    }
    onMount() {
        // console.log('Frame', 'onMount')
        (0, context_1.setParent)(this.$$context, this.$parent);
        (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._sub_context_unlisten = (0, addListener_1.addListeners)(this.$$context, [
            (0, custom_1.makeCustomListener)('themechanged', this._on_sub_context_theme_changed),
            (0, custom_1.makeCustomListener)('colorchanged', this._on_sub_context_color_changed),
        ]);
        this._refresh_sub_context_disabled();
        this._refresh_sub_context_color();
        // this._refresh_sub_context_theme()
    }
    onUnmount() {
        // console.log('Frame', 'onUnmount')
        (0, context_1.setParent)(this.$$context, null);
        this._context_unlisten();
        (0, context_1.unmount)(this.$$context);
        this._sub_context_unlisten();
    }
}
exports.default = Frame;
//# sourceMappingURL=Component.js.map