var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { DomUtil, StringUtil } from '../../lib/index';
export class Svg {
    constructor() {
        this.type = 'template';
    }
    componentDidLoad() { }
    componentDidUpdate() { }
    loadSvg() {
        return __awaiter(this, void 0, void 0, function* () {
            this.loading = true;
            const result = yield 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;
            setTimeout((arg) => {
                if (this.el.querySelector('svg')) {
                    this._svgElement = this.el.querySelector('svg');
                    this.renderSvg();
                }
            }, 40);
            this.getElements();
        }, 20);
    }
    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');
        }
        // 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", 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
        }]; }
}
//
// declare var _: any;
// declare var $: any;
//
//
// export class SvgTemplateComponent implements OnChanges {
//     @Input() private src: string;
//     @Input() private data: any = {};
//     @Output() public loaded: EventEmitter<any> = new EventEmitter();
//
//     private settings;
//     public _svg: any;
//     private _svgElement: any;
//     private _dataCurrent: any;
//     private _dataNew: any;
//     private _containerElements: any = {};
//     private _src: string;
//     public el: HTMLElement;
//     public type: string;
//
//     constructor(private baseService: BaseService, public elementRef: ElementRef, private http: Http, private renderer: Renderer, private _sanitizer: DomSanitizer, private replaceAll: ReplaceAllPipe, private betweenPipe: BetweenPipe) {
//         // super(baseService)
//     }
//
//     ngOnInit() {
//         this.settings = this.baseService.settings;
//         this.el = this.elementRef.nativeElement;
//         this.type = 'template';
//         this._src = this.src;
//         this.loadSvg();
//     }
//
//
//     initSvg(svgElement) {
//         this._svgElement = svgElement;
//     }
//
//
//
//
//
//
//             parseSvg(svgResult: string) {
//                 if (this.type === 'template') {
//                 // fixes Illustrator weird character display bug.
//                 svgResult = svgResult.replace(']>', '');
//                 // remove whitespaces around data properties
//                 svgResult = su.replaceAll(svgResult, '{{ ', '{{');
//                 svgResult = su.replaceAll(svgResult, '{{  ', '{{');
//                 svgResult = su.replaceAll(svgResult, '{{   ', '{{');
//                 svgResult = su.replaceAll(svgResult, ' }}', '}}');
//                 svgResult = su.replaceAll(svgResult, '  }}', '}}');
//                 svgResult = su.replaceAll(svgResult, '   }}', '}}');
//                 this._svg = svgResult;
//                 const timer = setInterval(() => {
//                 if (this.el.querySelector('svg')) {
//                 this.initSvg(this.el.querySelector('svg'));
//                 this.renderSvg();
//                 if (this.type === 'template') {
//                 if (this.loaded) {
//                 this.loaded.emit('svg-loaded');
//             }
//                 this.renderTemplateData();
//             }
//                 if (this.type === 'embedded') {
//                 // fix to hide xml tag display ??
//                 this.el.style.fontSize = '0';
//                 // let positionCorrection = 0 - this._svgElement.getBoundingClientRect().left + this.el.getBoundingClientRect().left;
//                 // this.el.style.marginLeft = positionCorrection+'px';
//                 // this.el.style.overflowX = 'hidden';
//                 if (this.loaded) {
//                 this.loaded.emit('svg-loaded');
//             }
//             }
//                 clearInterval(timer);
//             }
//             }, 50);
//                 return;
//             }
//             }
//
//                 );
//             }
//             }
//
//             }
//
//
//
//
//
//
//             svgCalculateSize(svg) {
//                 // svg.style.display='block';
//                 // svg.style.display='none';
//
//                 let svgWidth = svg.clientWidth || window.getComputedStyle(svg).width;
//                 let svgHeight = svg.clientHeight || window.getComputedStyle(svg).height;
//                 // let svgWidth = $(svg).width();
//                 // let svgHeight =$(svg).height();
//
//                 return({width: svgWidth, height: svgHeight});
//
//                 // let heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'];
//                 // let widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'];
//                 //
//                 // let gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway
//                 //     bounds = {
//                 //         width: 0,
//                 //         height: 0
//                 //     };
//                 //
//                 // heightComponents.forEach(function (css) {
//                 //     bounds.height += parseFloat(gCS[css]);
//                 // });
//                 // widthComponents.forEach(function (css) {
//                 //     bounds.width += parseFloat(gCS[css]);
//                 // });
//                 // return bounds;
//             };
//
//
//             }
//
//
//# sourceMappingURL=svg.js.map