"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.webLayout = void 0;
const parseTransform_1 = require("../../../parseTransform");
const style_1 = require("../../../style");
const getFontSize_1 = require("../../../util/style/getFontSize");
const getOpacity_1 = require("../../../util/style/getOpacity");
const fitChildren = (window, parentTrait, parentNode, children, path, childrenFontSize, childrenOpacity, childrenSx, childrenSy, expandChild) => {
    var _a;
    let i = 0;
    for (const childStyle of children) {
        const childNode = window.document.createElement('div');
        let { display: childDisplay = 'block', width: childWidthStr = '', height: childHeightStr = '', 'font-size': childFontSizeStr, opacity: childOpacityStr = '1', transform: childTransform = '', } = childStyle;
        const [childTransformX, childTransformY, childScaleX, childScaleY, childRotateX, childRotateY, childRotateZ,] = (0, parseTransform_1.parseTransform)(childTransform, parentTrait.width, parentTrait.height);
        const childOpacity = (0, getOpacity_1.parseOpacity)(childOpacityStr);
        let fontSize = (childFontSizeStr && (0, getFontSize_1.parseFontSize)(childFontSizeStr)) ||
            parentTrait.fontSize;
        const fontSizeUnit = (_a = childFontSizeStr === null || childFontSizeStr === void 0 ? void 0 : childFontSizeStr.match(/(px|em|rem|pt|vw|vh|%)$/)) === null || _a === void 0 ? void 0 : _a[1];
        if (fontSizeUnit === 'vw') {
            fontSize *= parentTrait.width / 100;
        }
        if (fontSizeUnit === 'vh') {
            fontSize *= parentTrait.height / 100;
        }
        const sx = parentTrait.sx * childScaleX;
        const sy = parentTrait.sy * childScaleY;
        const displayContents = childDisplay === 'contents';
        const fitWidth = childWidthStr === 'fit-content';
        const fitHeight = childHeightStr === 'fit-content' || childHeightStr === 'auto';
        if (fitWidth || fitHeight || displayContents) {
            const childPath = [...path, i];
            const childChildrenStyle = expandChild(childPath);
            fitChildren(window, Object.assign(Object.assign({}, parentTrait), { fontSize }), childNode, childChildrenStyle, childPath, [], [], [], [], expandChild);
        }
        childrenFontSize.push(fontSize);
        childrenOpacity.push(childOpacity);
        childrenSx.push(sx);
        childrenSy.push(sy);
        (0, style_1.applyStyle)(childNode, childStyle);
        parentNode.appendChild(childNode);
        i++;
    }
};
function webLayout(window, opt) {
    const animation = {
        reflectChildrenTrait: function (parentTrait, parentStyle, childrenStyle, path = [], expandChild) {
            const parentNode = window.document.createElement('div');
            (0, style_1.applyStyle)(parentNode, parentStyle);
            parentNode.style.position = 'absolute';
            parentNode.style.left = `${parentTrait.x}px`;
            parentNode.style.top = `${parentTrait.y}px`;
            parentNode.style.width = `${parentTrait.width}px`;
            parentNode.style.height = `${parentTrait.height}px`;
            // parentNode.style.transform = `scale(${parentTrait.sx}, ${parentTrait.sy})`
            parentNode.style.transform = ``;
            parentNode.style.fontSize = `${parentTrait.fontSize}px`;
            parentNode.style.opacity = 'hidden';
            parentNode.style.margin = '0';
            const childrenFontSize = [];
            const childrenOpacity = [];
            const childrenSx = [];
            const childrenSy = [];
            fitChildren(window, parentTrait, parentNode, childrenStyle, path, childrenFontSize, childrenOpacity, childrenSx, childrenSy, expandChild);
            window.document.body.appendChild(parentNode);
            const childrenTrait = [];
            for (let i = 0; i < childrenStyle.length; i++) {
                const childStyle = childrenStyle[i];
                const childFontSize = childrenFontSize[i];
                const childOpacity = childrenOpacity[i];
                const childSx = childrenSx[i];
                const childSy = childrenSy[i];
                const childNode = parentNode.children.item(i);
                const rect = childNode.getBoundingClientRect();
                let x = rect.x;
                let y = rect.y;
                const childTrait = {
                    x,
                    y,
                    width: rect.width,
                    height: rect.height,
                    opacity: childOpacity,
                    fontSize: childFontSize,
                    sx: childSx,
                    sy: childSy,
                };
                childrenTrait.push(childTrait);
            }
            window.document.body.removeChild(parentNode);
            return childrenTrait;
        },
    };
    return animation;
}
exports.webLayout = webLayout;
//# sourceMappingURL=layout.js.map