import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-82a2445c.js';
import './chunk-d7ac2f15.js';
import { D as DomUtil, S as StringUtil } from './chunk-18ca1c85.js';

class Svg {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.type = 'template';
        this.svgElementClick = createEvent(this, "svgElementClick", 7);
    }
    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;
        // illustrator fix
        svgResult = svgResult.replace(']>', '');
        // remove whitespaces around data properties
        svgResult = su.replaceAll(svgResult, '{{ ', '{{');
        svgResult = su.replaceAll(svgResult, '{{  ', '{{');
        svgResult = su.replaceAll(svgResult, ' }}', '}}');
        svgResult = su.replaceAll(svgResult, '  }}', '}}');
        // setVar dynamic data
        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;
            this.getElements();
            if (this.el.querySelector('svg')) {
                this._svgElement = this.el.querySelector('svg');
                this.renderSvg();
            }
        }, 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) => {
            if (document.getElementById(element.id)) {
                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');
        }
        // console.log('--------------');
        // console.log('svg: type=' + this.type);
        // console.log('responsive=' + responsive);
        // console.log('viewBox=' + viewBox);
        let w, h;
        // fixme ??
        if (viewBox) {
            w = viewBox.split(' ')[2];
            h = viewBox.split(' ')[3];
            if (responsive === false) {
                // 100%
                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;
                // att.value = w+'px';
                $svg.setAttributeNode(att);
                att = document.createAttribute('height');
                att.value = h;
                // att.value = h+'px';
                $svg.setAttributeNode(att);
            }
            // console.log($svg.getAttribute('width'));
            // console.log($svg.getAttribute('height'));
        }
        // replace Illustrator fonts: fixme: check + remove jQuery dependency
        // if (this.settings.font_replace_map && (<any>window)['$']) {
        //     _.each(this.settings.font_replace_map, function(obj){
        //         _.each(obj, function(v, k){
        //             // presentation export:
        //             $(self.el).find('svg text').each(function(){
        //                 if ($(this).attr('font-family')) {
        //                     if ($(this).attr('font-family').match(k)) {
        //                         // console.log('v',v);
        //                         // console.log('k',k);
        //                         $(this).attr('font-family', $(this).attr('font-family').replace(k, v));
        //                         $(this).css('font-family:' + v);
        //                     }
        //                 }
        //             });
        //             // styles export:
        //             $(self.el).find('svg style').each(function(){
        //                 $(this).text($(this).text().replace(k, v));
        //             });
        //         });
        //     });
        // }
    }
    render() {
        if (this.dataJson) {
            this.data = JSON.parse(this.dataJson);
        }
        if (this.src) {
            this.loadSvg().then((res) => {
                this.parseSvg(res);
            });
        }
        return (h("div", { class: "svg-container embedded" }));
    }
    get el() { return getElement(this); }
}

export { Svg as ema_svg };
