import { ConditionalDynamicDisplayElement } from '../base/conditional-dynamic-display-element';
import { GraphStateElement } from '../shared/graph/graph-state-element';
import { LOGGER_SERVICE_TOKEN } from '../../logger';
import { TextElementModal } from '../shared/text/text-element';
export class TextElement extends ConditionalDynamicDisplayElement {
    constructor(element, injector, permissionChecker, variableCommunicator, variableStore, graphStore, signalRAppId) {
        super(element, permissionChecker, variableCommunicator, variableStore, signalRAppId);
        this.graphStore = graphStore;
        this.logger = injector.get(LOGGER_SERVICE_TOKEN);
        if (this.model.text && this.model.size) {
            const width = this.model.size.width;
            const height = this.model.size.height;
            this.rootElement.selectAll('*').remove();
            this.rootElement.append('rect').attr('width', width).attr('height', height).attr('fill', 'transparent');
            if (this.model.useGraph === true) {
                const graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger);
                graphStateElement.switchToState(0);
                this.$element.prepend(graphStateElement.Element);
            }
            const font = {
                isUnderline: this.model.isUnderline,
                isBold: this.isBold(this.model.font),
                isItalic: this.isItalic(this.model.font),
                fontSize: this.model.fontSize,
                fontFamily: this.fontFamily(this.model.font),
                color: this.model.stroke,
                textAlign: this.model.textAlign
            };
            const textElement = new TextElementModal(this.model.text, font, width, height);
            this.$element.append(textElement.Element);
        }
        else {
            this.handleTextValue();
            if (this.model.size && this.model.useGraph) {
                this.initGraph(this.model.size.width, this.model.size.height);
            }
        }
    }
    dispose() {
        if (this.$element) {
            this.$element.remove();
        }
    }
    handleTextValue() {
        const allText = this.$element.find('text');
        for (let i = 0; i < allText.length; i++) {
            allText[i].style.whiteSpace = 'pre';
        }
    }
    initGraph(width, height) {
        const graphStateElement = new GraphStateElement(this.model.graphSetting, width, height, this.graphStore, this.logger);
        graphStateElement.switchToState(0);
        this.$element.prepend(graphStateElement.Element);
    }
}
