"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.dispatchContextEvent = dispatchContextEvent;
exports.dispatchCustomEvent = dispatchCustomEvent;
exports.setParent = setParent;
exports.mount = mount;
exports.unmount = unmount;
exports.resize = resize;
exports.setTheme = setTheme;
exports._setColor = _setColor;
exports.setColor = setColor;
exports.appendChild = appendChild;
const array_1 = require("../util/array");
function dispatchContextEvent($context, type, data = {}) {
    const { $element } = $context;
    dispatchCustomEvent($element, type, data, false);
}
function dispatchCustomEvent($element, type, detail = {}, bubbles = true) {
    $element.dispatchEvent(new CustomEvent(`_${type}`, { detail, bubbles }));
}
function setParent($context, $parent) {
    $context.$parent = $parent;
    const { $children } = $context;
    for (const component of $children) {
        // component.$parent = $parent
    }
}
function mount($context) {
    $context.$mounted = true;
    const { $element, $positionObserver, $resizeObserver } = $context;
    const { width, height } = $element.getBoundingClientRect();
    $context.$width = width;
    $context.$height = height;
    const { x, y, sx, sy } = $positionObserver.observe($element);
    $context.$x = x;
    $context.$y = y;
    $context.$sx = sx;
    $context.$sy = sy;
    $resizeObserver.observe($element);
    for (const component of $context.$children) {
        component.mount($context);
    }
}
function unmount($context) {
    $context.$mounted = false;
    const { $element, $positionObserver, $resizeObserver } = $context;
    $positionObserver.disconnect();
    $resizeObserver.unobserve($element);
    $resizeObserver.disconnect();
    for (const component of $context.$children) {
        component.unmount();
    }
}
function resize($context, width, height) {
    $context.$width = width;
    $context.$height = height;
    dispatchContextEvent($context, 'resize', { width, height });
}
function setTheme($context, $theme) {
    if ($context.$theme === $theme) {
        return;
    }
    $context.$theme = $theme;
    dispatchContextEvent($context, 'themechanged', {});
}
function _setColor($context, $color) {
    if ($context.$color === $color) {
        return;
    }
    $context.$color = $color;
    $context.$element.style.color = $color;
}
function setColor($context, $color) {
    _setColor($context, $color);
    dispatchContextEvent($context, 'colorchanged', {});
}
function appendChild($context, component, { animate } = { animate: false }) {
    const { $element } = component;
    $context.$element.appendChild($element);
    const base = component.getRootLeaves();
    for (const leaf of base) {
        $context.$element.appendChild(leaf.$element);
    }
    $context.$children.push(component);
    if ($context.$mounted) {
        component.mount($context);
    }
    return () => {
        if ($context.$mounted) {
            component.unmount();
        }
        const base = component.getRootLeaves();
        for (const leaf of base) {
            $context.$element.removeChild(leaf.$element);
        }
        (0, array_1.remove)($context.$children, component);
        return component;
    };
}
//# sourceMappingURL=context.js.map