"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const activeElement_1 = require("../../../../client/activeElement");
const addListener_1 = require("../../../../client/addListener");
const component_1 = require("../../../../client/component");
const context_1 = require("../../../../client/context");
const custom_1 = require("../../../../client/event/custom");
const html_1 = __importDefault(require("../../../../client/html"));
const isTextField_1 = require("../../../../client/isTextField");
const renderFrame_1 = require("../../../../client/renderFrame");
const userSelect_1 = require("../../../../client/util/style/userSelect");
exports.DEFAULT_STYLE = {
    top: '0',
    width: '100%',
    height: '100%',
    overflow: 'auto',
    ...(0, userSelect_1.userSelect)('text'),
};
class Frame extends html_1.default {
    constructor($props, $system) {
        super($props, $system, $system.api.document.createElement('div'), exports.DEFAULT_STYLE, {}, {
            theme: (theme) => {
                this._refresh_sub_context_color();
            },
            color: (color) => {
                this._refresh_sub_context_color();
            },
        });
        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);
        };
        const { className, color } = $props;
        this.$element.classList.add('frame');
        this.$element.addEventListener('keydown', (event) => {
            const { api: { document: { getSelection, createRange, canSelectShadowDom }, }, } = this.$system;
            if (event.metaKey && event.key.toLowerCase() === 'a') {
                // Selection doesn't work on Safari (2024) inside
                // shadowRoot; if this can be detected, accept the
                // default browser behavior
                if (!canSelectShadowDom()) {
                    return;
                }
                const activeElement = (0, activeElement_1.getActiveElement)(this.$system);
                if (activeElement && (0, isTextField_1.isTextField)(activeElement)) {
                    return;
                }
                event.preventDefault();
                const range = createRange();
                range.selectNodeContents(this.$element);
                const selection = getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                event.stopPropagation();
            }
        });
        this.$element.addEventListener('focus', () => {
            (0, component_1.defaultFocusLookup)(this);
        });
        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, this.$context, this.$element, $$init);
    }
    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)('themechanged', this._on_context_theme_changed),
            (0, custom_1.makeCustomListener)('colorchanged', this._on_context_color_changed),
        ]);
        this._refresh_sub_context_color();
        this._refresh_sub_context_theme();
    }
    _refresh_sub_context_theme() {
        const { $theme } = this.$context;
        const { theme } = this.$props;
        const _theme = theme ?? $theme ?? '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