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 HyperlinkElement 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.size) {
            this.initGraphAndText();
        }
        if (this.model && this.model.linkAddress) {
            this.rootElement.style('cursor', 'hand');
            this.rootElement.on('mousedown', () => {
                let linkAddress = this.model.linkAddress;
                const reg = /^http(s)?:\/\/.+$/;
                if (!reg.test(linkAddress)) {
                    linkAddress = 'http://' + linkAddress;
                }
                window.open(linkAddress, '_system');
            });
        }
    }
    initGraphAndText() {
        this.rootElement.selectAll('*').remove();
        const size = this.model.size;
        const width = size.width;
        const height = size.height;
        this.rootElement.append('rect').attr('id', 'StateFrame').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);
    }
}
