import { DomUtil, StringUtil } from '@ema/core';
export class Svg {
    constructor() {
        this.type = 'template';
    }
    componentDidLoad() { }
    componentDidUpdate() { }
    async loadSvg() {
        this.loading = true;
        const result = await fetch(`${this.src}`).then((response) => {
            return response.text();
        })
            .catch(error => console.error('Error:', error));
        this.loading = false;
        return result;
    }
    parseSvg(svgResult) {
        let su = StringUtil;
        this._svg = svgResult;
        svgResult = svgResult.replace(']>', '');
        svgResult = su.replaceAll(svgResult, '{{ ', '{{');
        svgResult = su.replaceAll(svgResult, '{{  ', '{{');
        svgResult = su.replaceAll(svgResult, ' }}', '}}');
        svgResult = su.replaceAll(svgResult, '  }}', '}}');
        if (this.data) {
            Object.keys(this.data).forEach((k) => {
                svgResult = su.replaceAll(svgResult, '{{' + k + '}}', this.data[k]);
            });
        }
        this.svgResult = svgResult;
        setTimeout((arg) => {
            this.el.querySelector('.embedded').innerHTML = svgResult;
            setTimeout((arg) => {
                if (this.el.querySelector('svg')) {
                    this._svgElement = this.el.querySelector('svg');
                    this.renderSvg();
                }
            }, 40);
            this.getElements();
        }, 20);
    }
    async getElements() {
        this.elements = [];
        let ignoredArr = ['Shape', 'Oval', 'Rectangle', 'Line', 'Group'];
        let elements = this.el.querySelectorAll('*');
        Array.prototype.forEach.call(elements, (el) => {
            if (DomUtil.getAttributes(el)['id']) {
                let id = DomUtil.getAttributes(el)['id'];
                let ignored = false;
                ignoredArr.forEach((ignore) => {
                    if (id.match(ignore)) {
                        ignored = true;
                    }
                });
                if (!ignored) {
                    if (id.match('btn-')) {
                        el.style.cursor = 'pointer';
                        el.style.opacity = '0';
                    }
                    this.elements.push({
                        id: id,
                        el: el
                    });
                }
            }
        });
        this.setClickHandlers();
        return this.elements;
    }
    svgElementClickHandler(e) {
        let detail;
        e.stopPropagation();
        this.elements.forEach((element) => {
            if (element.el === e.target) {
                detail = element;
            }
        });
        if (detail) {
            this.svgElementClick.emit(detail);
        }
    }
    setClickHandlers() {
        this.elements.forEach((element) => {
            document.getElementById(element.id).addEventListener('click', (e) => {
                this.svgElementClickHandler(e);
            });
            if (element.id.match('btn-')) {
            }
        });
    }
    renderSvg() {
        const $svg = this._svgElement;
        const responsive = !(this.el.className.indexOf('img-responsive') === -1);
        let viewBox;
        if ($svg.getAttribute('viewBox')) {
            viewBox = $svg.getAttribute('viewBox');
        }
        let w, h;
        if (viewBox) {
            w = viewBox.split(' ')[2];
            h = viewBox.split(' ')[3];
            if (responsive === false) {
                this.el.style.width = w + 'px';
                this.el.style.maxWidth = w + 'px';
                this.el.style.height = h + 'px';
                this.el.style.maxHeight = h + 'px';
                $svg.style.width = w + 'px';
                $svg.style.maxWidth = w + 'px';
                $svg.style.height = h + 'px';
                $svg.style.maxHeight = h + 'px';
                let att;
                att = document.createAttribute('width');
                att.value = w;
                $svg.setAttributeNode(att);
                att = document.createAttribute('height');
                att.value = h;
                $svg.setAttributeNode(att);
            }
        }
    }
    render() {
        if (this.dataJson) {
            this.data = JSON.parse(this.dataJson);
        }
        if (this.src) {
            this.loadSvg().then((res) => {
                this.parseSvg(res);
            });
        }
        return (h("div", null,
            h("div", { class: "svg-container embedded" })));
    }
    static get is() { return "ema-svg"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "dataJson": {
            "type": "Any",
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        },
        "getElements": {
            "method": true
        },
        "src": {
            "type": String,
            "attr": "src"
        },
        "svgResult": {
            "state": true
        },
        "type": {
            "type": String,
            "attr": "type"
        }
    }; }
    static get events() { return [{
            "name": "svgElementClick",
            "method": "svgElementClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
