"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LAYOUT_STYLE_ATTRS = void 0;
exports.extractStyle = extractStyle;
exports._extractStyle = _extractStyle;
exports.extractLayoutStyle = extractLayoutStyle;
exports._extractFromRawStyle = _extractFromRawStyle;
const isFrameRelative_1 = require("../isFrameRelative");
const svg_1 = require("../util/svg");
const DEFAULT_FONT_SIZE_1 = require("./DEFAULT_FONT_SIZE");
const id_1 = require("./id");
const isContentEditable_1 = require("./isContentEditable");
const rawExtractStyle_1 = require("./rawExtractStyle");
const getFontSize_1 = require("./util/style/getFontSize");
exports.LAYOUT_STYLE_ATTRS = [
    'position',
    'boxSizing',
    'margin',
    'marginLeft',
    'marginTop',
    'marginBottom',
    'marginRight',
    'top',
    'left',
    'right',
    'bottom',
    'width',
    'height',
    'opacity',
    'fontSize',
    'transform',
    'aspectRatio',
    'color',
    'object-fit',
];
function extractStyle(component, trait, measureText) {
    const { $node } = component;
    return _extractStyle(component, $node, trait, measureText);
}
function _extractStyle(component, element, trait, measureText) {
    const style = (0, rawExtractStyle_1.rawExtractStyle)(element, trait, measureText);
    return _extractFromRawStyle(component, element, style, trait, measureText);
}
function extractLayoutStyle(style) {
    var _a, _b;
    const style_ = {};
    for (const attr of exports.LAYOUT_STYLE_ATTRS) {
        style_[attr] = (_b = (_a = style[attr]) !== null && _a !== void 0 ? _a : style[(0, id_1.camelToDashed)(attr)]) !== null && _b !== void 0 ? _b : '';
    }
    return style_;
}
function _extractFromRawStyle(component, element, style, trait, measureText) {
    var _a;
    const { api: { window: { getComputedStyle }, }, } = component.$system;
    const fitWidth = style['width'] === 'fit-content';
    const fitHeight = style['height'] === 'fit-content';
    if (element instanceof Text) {
        const fontSize = component.getFontSize();
        const { textContent } = component.$element;
        const { width, height } = measureText(textContent, fontSize, trait.width);
        return {
            width: `${width}px`,
            height: `${height}px`,
        };
    }
    const contentEditable = (0, isContentEditable_1.isContentEditable)(element);
    if (contentEditable && (fitWidth || fitHeight)) {
        const fontSize = component.getFontSize();
        const { textContent } = component.$element;
        let { width, height } = measureText(textContent, fontSize, trait.width);
        if (fitWidth) {
            style['width'] = `${width}px`;
        }
        if (fitHeight) {
            if (contentEditable && !textContent) {
                ;
                ({ height } = measureText('|', fontSize, trait.width));
            }
            style['height'] = `${height}px`;
        }
    }
    if (style['display'] === 'contents') {
        style = {
            width: '100%',
            height: '100%',
        };
    }
    if (element instanceof HTMLCanvasElement) {
        const treatProp = (name) => {
            const prop = component.getProp(name);
            style[name] = '100%';
            if (prop !== undefined) {
                if (typeof prop === 'string') {
                    if ((0, isFrameRelative_1.isFrameRelativeValue)(prop)) {
                        const prop_num = prop.substring(0, prop.length - 2);
                        style[`max-${name}`] = `${prop_num}%`;
                    }
                    else {
                        //
                    }
                }
                else {
                    style[`max-${name}`] = `${prop}px`;
                }
            }
            else {
                style[`max-${name}`] = `${element[name]}px`;
            }
        };
        style['aspect-ratio'] = '1 / 1';
        treatProp('width');
        treatProp('height');
    }
    if (element instanceof HTMLImageElement) {
        const ratio = element.naturalWidth / element.naturalHeight;
        const ratio_ = ratio.toFixed(2);
        style['aspect-ratio'] = `${ratio_}`;
    }
    if (element instanceof HTMLInputElement) {
        if (element.type === 'text' ||
            element.type === 'number' ||
            element.type === 'password') {
            if (style.height === 'fit-content') {
                const { value } = element;
                const fontSize = element.style.fontSize;
                const fontSizeNum = (_a = (0, getFontSize_1.parseFontSize)(fontSize)) !== null && _a !== void 0 ? _a : DEFAULT_FONT_SIZE_1.DEFAULT_FONT_SIZE;
                const { height } = measureText(value, fontSizeNum, trait.width);
                style.height = `${height}px`;
            }
        }
        if (element.type === 'range') {
            style.height = '18px';
        }
    }
    else if (element instanceof HTMLSelectElement) {
        style.height = '18px';
    }
    if (element instanceof SVGPathElement) {
        const d = element.getAttribute('d');
        const bb = (0, svg_1.getPathBoundingBox)(d);
        style['width'] = `${bb.width}px`;
        style['height'] = `${bb.height}px`;
        // TODO
    }
    if (element instanceof SVGRectElement) {
        style['width'] = `${element.width.animVal.value}px`;
        style['height'] = `${element.height.animVal.value}px`;
        // TODO
    }
    if (element instanceof SVGCircleElement) {
        const r = element.r.animVal.value;
        const width = 2 * r;
        const height = width;
        style['width'] = `${width}px`;
        style['height'] = `${height}px`;
        // TODO
    }
    return style;
}
//# sourceMappingURL=extractStyle.js.map