"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderFrame = renderFrame;
const element_1 = require("../util/element");
const context_1 = require("./context");
const stopPropagation_1 = require("./stopPropagation");
const theme_1 = require("./theme");
function renderFrame($system, $parent, $root, $init = {}) {
    const { api: { document: { ResizeObserver, PositionObserver }, }, } = $system;
    (0, element_1.removeChildren)($root);
    const $element = $root;
    const $theme = 'dark';
    const $color = (0, theme_1.defaultThemeColor)($theme);
    $element.style.color = $color;
    const $resizeObserver = new ResizeObserver((entries) => {
        const entry = entries[0];
        const { width, height } = entry.contentRect;
        (0, context_1.resize)($context, width, height);
    });
    const $positionObserver = new PositionObserver($system, (x, y, sx, sy, rx, ry, rz) => {
        $context.$x = x;
        $context.$y = y;
        $context.$sx = sx;
        $context.$sy = sy;
        $context.$rx = rx;
        $context.$ry = ry;
        $context.$rz = rz;
    });
    const $children = [];
    const $context = {
        $system,
        $mounted: false,
        $disabled: false,
        $parent,
        $width: 0,
        $height: 0,
        $x: 0,
        $y: 0,
        $sx: 1,
        $sy: 1,
        $rx: 0,
        $ry: 0,
        $rz: 0,
        $element,
        $theme,
        $color,
        $children,
        get $context() {
            return $context;
        },
        $resizeObserver,
        $positionObserver,
        ...$init,
    };
    $system.context.push($context);
    for (const type of $system.customEvent) {
        const _type = `_${type}`;
        (0, stopPropagation_1.stopByPropagation)($element, _type);
    }
    return $context;
}
//# sourceMappingURL=renderFrame.js.map