"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.webLayout = webLayout;
const color_1 = require("../../../color");
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, forceExpandChildren) => {
    var _a, _b;
    let i = 0;
    for (const childStyle of children) {
        const childNode = window.document.createElement('div');
        let { display: childDisplay = 'block', width: childWidthStr = 'auto', height: childHeightStr = 'auto', opacity: childOpacityStr = '1', transform: childTransform = '', } = childStyle;
        const childFontSize = (_a = childStyle['fontSize']) !== null && _a !== void 0 ? _a : childStyle['font-size'];
        let childFontSizeStr = childFontSize;
        if (typeof childFontSize === 'number') {
            childFontSizeStr = `${childFontSizeStr}px`;
        }
        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 = (_b = childFontSizeStr === null || childFontSizeStr === void 0 ? void 0 : childFontSizeStr.match(/(px|em|rem|pt|vw|vh|%)$/)) === null || _b === void 0 ? void 0 : _b[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' || childWidthStr === 'auto';
        const fitHeight = childHeightStr === 'fit-content' || childHeightStr === 'auto';
        const shouldExpand = fitWidth || fitHeight || displayContents;
        if (shouldExpand || forceExpandChildren) {
            const childPath = [...path, i];
            const childChildrenStyle = expandChild(childPath);
            fitChildren(window, { ...parentTrait, fontSize }, childNode, childChildrenStyle, childPath, [], [], [], [], expandChild, shouldExpand);
        }
        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.visibility = 'hidden';
            parentNode.style.margin = '0';
            const childrenFontSize = [];
            const childrenOpacity = [];
            const childrenSx = [];
            const childrenSy = [];
            fitChildren(window, parentTrait, parentNode, childrenStyle, path, childrenFontSize, childrenOpacity, childrenSx, childrenSy, expandChild, false);
            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();
                const computedStyle = window.getComputedStyle(childNode);
                let x = rect.x;
                let y = rect.y;
                let color;
                if (computedStyle.color &&
                    computedStyle.color !== 'rgb(255, 255, 255)') {
                    const hex = (0, color_1.colorToHex)(computedStyle.color);
                    color = (hex && (0, color_1.hexToRgba)(hex)) || parentTrait.color;
                }
                else {
                    color = parentTrait.color;
                }
                const childTrait = {
                    x,
                    y,
                    width: rect.width,
                    height: rect.height,
                    opacity: childOpacity,
                    fontSize: childFontSize,
                    sx: childSx,
                    sy: childSy,
                    color,
                };
                childrenTrait.push(childTrait);
            }
            window.document.body.removeChild(parentNode);
            return childrenTrait;
        },
    };
    return animation;
}
//# sourceMappingURL=layout.js.map