import { isNil } from 'lodash';
export class TextElementModal {
    constructor(content, font, width, height, isVariableText) {
        if (/iPhone|iPod/i.test(navigator.userAgent)) {
            width += 10;
        }
        this._element = this.getforeignObjectElement(width, height);
        this._element.innerHTML = '';
        const text = this.createNewForeignObjectText(content, font, width, height, isVariableText);
        this._element.appendChild(text);
    }
    get Element() {
        return this._element;
    }
    getforeignObjectElement(width, height) {
        const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
        textElement.setAttribute('width', width.toString());
        textElement.setAttribute('height', height.toString());
        return textElement;
    }
    createNewForeignObjectText(content, font, width, height, isVariableText) {
        if (font && !font.fontFamily.includes(',msyh')) {
            font.fontFamily += ',msyh';
        }
        const bodyDiv = document.createElement('div');
        const textAlign = font.textAlign ? font.textAlign : 'center';
        bodyDiv.style.cssText = `user-select: none;text-align: ${textAlign};display: table-cell;vertical-align: middle;`;
        if (isNil(content)) {
            content = '';
        }
        let textArray = content.toString().split('\n');
        textArray = textArray.map(item => {
            return item.toString().replace(/\s/g, '&nbsp;');
        });
        const fragment = document.createDocumentFragment();
        for (let index = 0; index < textArray.length; index++) {
            const textDiv = document.createElement('div');
            textDiv.className = 'text-list';
            const innerHTML = textArray[index] ? textArray[index] : '&nbsp;';
            let fontString = '';
            if (font.isItalic) {
                fontString += 'italic ';
            }
            if (font.isBold) {
                fontString += 'bold ';
            }
            let lineHeight = 0;
            // chrome支持可显示最小字体大小为12px, 更小字体通过缩放实现
            const minFontSize = 12;
            lineHeight = parseInt(font.fontSize, 10) + 5;
            fontString += font.fontSize + '/' + lineHeight.toString() + 'px ' + font.fontFamily;
            textDiv.style.cssText = `color: ${font.color};word-break: break-all;font: ${fontString};`;
            if (font.isUnderline) {
                textDiv.style.textDecoration = 'underline';
            }
            const spanText = document.createElement('span');
            spanText.style.cssText = `
                display: contents;
                transform: scale(${parseInt(font.fontSize, 10) > minFontSize ? 1 : parseInt(font.fontSize, 10) / minFontSize});
                width: 100%;
                height: 100%;
            `;
            spanText.innerHTML = innerHTML;
            textDiv.appendChild(spanText);
            fragment.appendChild(textDiv);
        }
        bodyDiv.appendChild(fragment);
        const contentDiv = document.createElement('div');
        contentDiv.style.cssText = 'display: table;width: 100%;height: 100%;';
        contentDiv.appendChild(bodyDiv);
        const containerDiv = document.createElement('div');
        containerDiv.style.cssText = `overflow: hidden;width: ${width.toString() + 'px'};height: ${height.toString() + 'px'};`;
        if (isVariableText) {
            containerDiv.style.paddingRight = '8px';
        }
        containerDiv.appendChild(contentDiv);
        return containerDiv;
    }
}
