import { Flicker } from '../../../model';
import { isNil } from 'lodash';
export class TextStateElement {
    constructor(textStates, width, height, logger, version, faultFlickers) {
        this.textStates = textStates;
        this.width = width;
        this.height = height;
        this.logger = logger;
        this.version = version;
        this.faultFlickers = faultFlickers;
        this.faultFlickerStatus = false;
        this.faultFlickerInterval = undefined;
        this._element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    }
    get Element() {
        return this._element;
    }
    switchToState(stateId) {
        const textState = this.textStates.find(t => t.id === stateId);
        if (textState === undefined) {
            this.removeForeignObjectlement();
            this.logger.debug(`Can not find text state:${stateId}.`);
            return;
        }
        const content = textState.text.content;
        if (content === '') {
            this.removeForeignObjectlement();
            return;
        }
        const font = textState.text.font;
        if (!font) {
            this.removeForeignObjectlement();
            this.logger.debug('The font is undefined.');
            return;
        }
        const foreignObjectElement = this.getforeignObjectElement();
        foreignObjectElement.innerHTML = '';
        const text = this.createNewForeignObjectText(content, font);
        foreignObjectElement.appendChild(text);
        this.doFaultFlicker(foreignObjectElement, stateId);
    }
    getforeignObjectElement() {
        if (!this.textElement) {
            this.textElement = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
            this.textElement.setAttribute('width', this.width.toString());
            this.textElement.setAttribute('height', this.height.toString());
            this._element.appendChild(this.textElement);
        }
        return this.textElement;
    }
    createNewForeignObjectText(content, font) {
        if (font && !font.fontFamily.includes(',msyh')) {
            font.fontFamily += ',msyh';
        }
        const bodyDiv = document.createElement('div');
        bodyDiv.style.textAlign = font.textAlign ? font.textAlign : 'center';
        bodyDiv.style.userSelect = 'none';
        bodyDiv.style.display = 'table-cell';
        bodyDiv.style.verticalAlign = '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.innerHTML = textArray[index] ? textArray[index] : '&nbsp;';
            let fontString = '';
            if (font.isItalic) {
                fontString += 'italic ';
            }
            if (font.isBold) {
                fontString += 'bold ';
            }
            textDiv.style.wordBreak = 'break-word';
            textDiv.style.color = font.color;
            let lineHeight = 0;
            lineHeight = parseInt(font.fontSize, 10) + 5;
            fontString += font.fontSize + 'px/' + lineHeight + 'px ' + font.fontFamily;
            textDiv.style.font = fontString;
            if (font.isUnderline) {
                textDiv.style.textDecoration = 'underline';
            }
            fragment.appendChild(textDiv);
        }
        bodyDiv.appendChild(fragment);
        const contentDiv = document.createElement('div');
        contentDiv.style.display = 'table';
        contentDiv.style.width = '100%';
        contentDiv.style.height = '100%';
        contentDiv.appendChild(bodyDiv);
        const containerDiv = document.createElement('div');
        containerDiv.style.overflow = 'hidden';
        containerDiv.style.width = this.width.toString() + 'px';
        containerDiv.style.height = this.height.toString() + 'px';
        containerDiv.appendChild(contentDiv);
        return containerDiv;
    }
    removeForeignObjectlement() {
        if (this.textElement) {
            this._element.removeChild(this.textElement);
            delete this.textElement;
        }
    }
    doFaultFlicker(textElement, stateId) {
        if (this.version > 3 && this.faultFlickers) {
            this.clearFlickerInterval(textElement);
            const faultFlicker = this.faultFlickers.find(t => t.id === stateId);
            if (faultFlicker && faultFlicker.faultFlicker) {
                if (faultFlicker.faultFlicker.flicker === Flicker.Label) {
                    this.faultFlickerInterval = setInterval(() => {
                        if (this.faultFlickerStatus) {
                            textElement.setAttributeNS(null, 'display', 'block');
                            this.faultFlickerStatus = false;
                        }
                        else {
                            textElement.setAttributeNS(null, 'display', 'none');
                            this.faultFlickerStatus = true;
                        }
                    }, faultFlicker.faultFlicker.frequency * 500);
                }
            }
        }
    }
    clearFlickerInterval(textElement) {
        if (this.faultFlickerInterval) {
            clearInterval(this.faultFlickerInterval);
            if (this.faultFlickerStatus) {
                textElement.setAttributeNS(null, 'display', 'block');
            }
        }
    }
}
