"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.blurContext = exports.focusContext = exports.disableContext = exports.enableContext = exports.appendChild = exports.setColor = exports._setColor = exports.setTheme = exports.setHeight = exports.setWidth = exports.resize = exports.unmount = exports.mount = exports.setParent = exports.dispatchCustomEvent = exports.dispatchContextEvent = void 0;
const array_1 = require("../util/array");
function dispatchContextEvent($context, type, data = {}) {
    const { $element } = $context;
    dispatchCustomEvent($element, type, data, false);
}
exports.dispatchContextEvent = dispatchContextEvent;
function dispatchCustomEvent($element, type, detail = {}, bubbles = true) {
    $element.dispatchEvent(new CustomEvent(`_${type}`, { detail, bubbles }));
}
exports.dispatchCustomEvent = dispatchCustomEvent;
function setParent($context, $parent) {
    $context.$parent = $parent;
    const { $children } = $context;
    for (const component of $children) {
        component.$parent = $parent;
    }
}
exports.setParent = setParent;
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);
    }
}
exports.mount = mount;
function unmount($context) {
    // console.log('unmount')
    $context.$mounted = false;
    const { $element, $positionObserver, $resizeObserver } = $context;
    $positionObserver.disconnect();
    $resizeObserver.unobserve($element);
    $resizeObserver.disconnect();
    for (const component of $context.$children) {
        component.unmount();
    }
}
exports.unmount = unmount;
function resize($context, width, height) {
    // console.log('resize', width, height)
    $context.$width = width;
    $context.$height = height;
    dispatchContextEvent($context, 'resize', { width, height });
}
exports.resize = resize;
function setWidth($context, width) {
    // console.log('setWidth', width)
    const { $height } = $context;
    resize($context, width, $height);
}
exports.setWidth = setWidth;
function setHeight($context, height) {
    // console.log('setHeight', height)
    const { $width } = $context;
    resize($context, $width, height);
}
exports.setHeight = setHeight;
function setTheme($context, $theme) {
    if ($context.$theme === $theme) {
        return;
    }
    $context.$theme = $theme;
    // if ($theme === 'light') {
    //   $context.$element.style.filter = 'auto'
    // } else {
    //   $context.$element.style.filter = 'invert'
    // }
    dispatchContextEvent($context, 'themechanged', {});
}
exports.setTheme = setTheme;
function _setColor($context, $color) {
    if ($context.$color === $color) {
        return;
    }
    $context.$color = $color;
    $context.$element.style.color = $color;
}
exports._setColor = _setColor;
function setColor($context, $color) {
    _setColor($context, $color);
    dispatchContextEvent($context, 'colorchanged', {});
}
exports.setColor = setColor;
function appendChild($context, component, { animate } = { animate: false }) {
    const { $element } = component;
    $context.$element.appendChild($element);
    $context.$children.push(component);
    // the component share $parent
    component.$parent = $context.$parent;
    if ($context.$mounted) {
        component.mount($context);
    }
    return () => {
        const { $element } = component;
        if ($context.$mounted) {
            component.unmount();
        }
        $context.$element.removeChild($element);
        (0, array_1.remove)($context.$children, component);
        return component;
    };
}
exports.appendChild = appendChild;
function enableContext($context) {
    // console.log('enableContext')
    $context.$disabled = false;
    dispatchContextEvent($context, 'enabled', {});
}
exports.enableContext = enableContext;
function disableContext($context) {
    // console.log('disableContext')
    $context.$disabled = true;
    dispatchContextEvent($context, 'disabled', {});
}
exports.disableContext = disableContext;
function focusContext($context) {
    // console.log('focusContext')
    const { $children } = $context;
    if ($children.length > 0) {
        const component = (0, array_1.last)($children);
        component.focus();
    }
}
exports.focusContext = focusContext;
function blurContext($context) {
    $context.$element.blur();
}
exports.blurContext = blurContext;
//# sourceMappingURL=context.js.map