"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isVValue = void 0;
exports.reactToFrameSize = reactToFrameSize;
exports.applyDynamicStyle = applyDynamicStyle;
exports.removeStyle = removeStyle;
exports.applyStyle = applyStyle;
exports.mergeStyle = mergeStyle;
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");
const id_1 = require("./id");
const isVValue = (value) => {
    return value.endsWith('vh') || value.endsWith('vw');
};
exports.isVValue = isVValue;
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;
        };
        addContextListener();
        immediateResize();
        unlistenComponent = component.addEventListeners([
            (0, custom_1.makeCustomListener)('mount', () => {
                immediateResize();
                if (unlistenContext) {
                    unlistenContext();
                }
                addContextListener();
            }),
            (0, custom_1.makeCustomListener)('unmount', removeContextListener),
        ]);
        return (0, callAll_1.callAll)([removeContextListener, unlistenComponent]);
    }
    return NOOP_1.NOOP;
}
function applyDynamicStyle(component, $element, style = {}) {
    removeStyle($element);
    let { fontSize, width, height } = style;
    let unlistenResize = NOOP_1.NOOP;
    let styleUnlisten = component.$propUnlisten['style'];
    if (styleUnlisten) {
        styleUnlisten();
        delete component.$propUnlisten['style'];
    }
    const unlistenAll = [];
    if (typeof fontSize === 'number') {
        fontSize = `${fontSize}px`;
    }
    if (fontSize && (0, exports.isVValue)(fontSize)) {
        delete style.fontSize;
        unlistenAll.push(reactToFrameSize(fontSize, component, (value) => {
            $element.style.fontSize = value + 'px';
        }));
    }
    if (width && (0, exports.isVValue)(width)) {
        delete style.width;
        unlistenAll.push(reactToFrameSize(width, component, (value) => {
            $element.style.width = value + 'px';
        }));
    }
    if (height && (0, exports.isVValue)(height)) {
        delete style.height;
        unlistenAll.push(reactToFrameSize(height, component, (value) => {
            $element.style.height = value + 'px';
        }));
    }
    mergeStyle($element, style);
    styleUnlisten = (0, callAll_1.callAll)(unlistenAll);
    component.$propUnlisten['style'] = styleUnlisten;
    return styleUnlisten;
}
function removeStyle(element) {
    const _style = element.style;
    while (_style[0]) {
        _style.removeProperty(_style[0]);
    }
}
function applyStyle(element, style) {
    removeStyle(element);
    mergeStyle(element, style);
}
function mergeStyle(element, style) {
    const _style = element.style;
    for (const key in style) {
        const value = style[key];
        _style[(0, id_1.camelToDashed)(key)] = value;
    }
}
//# sourceMappingURL=style.js.map