"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeStyle = exports.removeStyle = exports.applyDynamicStyle = exports.reactToFrameSize = void 0;
const NOOP_1 = require("../NOOP");
const callAll_1 = require("../util/call/callAll");
const addListener_1 = require("./addListener");
const custom_1 = require("./event/custom");
const resize_1 = require("./event/resize");
function reactToFrameSize(value, component, setValue) {
    let unlistenComponent = NOOP_1.NOOP;
    let unlistenContext = NOOP_1.NOOP;
    const vh = value.endsWith('vh');
    const vw = value.endsWith('vw');
    if (vw || vh) {
        const percent = parseFloat(value.replace('vh', '').replace('vw', '')) / 100;
        const resize = ({ width, height }) => {
            setValue(vw ? width * percent : height * percent);
        };
        const resizeListener = (0, resize_1.makeResizeListener)(resize);
        const immediateResize = () => {
            const { $width: width, $height: height } = component.$context;
            resize({ width, height });
        };
        const addContextListener = () => {
            const { $context } = component;
            unlistenContext = (0, addListener_1.addListener)($context, resizeListener);
        };
        const removeContextListener = () => {
            unlistenContext();
            unlistenContext = NOOP_1.NOOP;
        };
        if (component.$mounted) {
            addContextListener();
            immediateResize();
        }
        unlistenComponent = component.addEventListeners([
            (0, custom_1.makeCustomListener)('mount', () => {
                immediateResize();
                addContextListener();
            }),
            (0, custom_1.makeCustomListener)('unmount', removeContextListener),
        ]);
        return () => (0, callAll_1.callAll)([removeContextListener, unlistenComponent])();
    }
    return NOOP_1.NOOP;
}
exports.reactToFrameSize = reactToFrameSize;
function applyDynamicStyle(component, style) {
    const { $element } = component;
    removeStyle($element);
    const { fontSize } = style;
    let unlistenResize = NOOP_1.NOOP;
    let styleUnlisten = component.$propUnlisten['style'];
    if (styleUnlisten) {
        styleUnlisten();
        delete component.$propUnlisten['style'];
    }
    if ($element instanceof HTMLElement) {
        if (fontSize) {
            delete $element.style.fontSize;
            unlistenResize = reactToFrameSize(fontSize, component, (value) => {
                $element.style.fontSize = value + 'px';
            });
        }
    }
    mergeStyle($element, style);
    styleUnlisten = (0, callAll_1.callAll)([unlistenResize]);
    component.$propUnlisten['style'] = styleUnlisten;
    return styleUnlisten;
}
exports.applyDynamicStyle = applyDynamicStyle;
function removeStyle(element) {
    const _style = element.style;
    while (_style[0]) {
        _style.removeProperty(_style[0]);
    }
}
exports.removeStyle = removeStyle;
function applyStyle(element, style) {
    removeStyle(element);
    mergeStyle(element, style);
}
exports.default = applyStyle;
function mergeStyle(element, style) {
    const _style = element.style;
    for (const key in style) {
        const value = style[key];
        _style[key] = value;
    }
}
exports.mergeStyle = mergeStyle;
//# sourceMappingURL=style.js.map