export class Graph {
    constructor() {
        this.data = {};
        this.visible = true;
        this.redraw = true;
    }
    componentDidLoad() {
        this.postRender();
        document.dispatchEvent(new CustomEvent('sketch-artboard-init', { detail: { "name": "graph", "tage": "sk-graph", "selector": "sk-graph", "className": "Graph", "pageName": "sketch", "options": { "imageFormat": {}, "embedSvg": true, "imageScales": [1] }, "paths": { "splash": "splash", "dev-stack": "dev-stack", "icon-logo": "icon-logo", "graph": "graph" }, "classes": { "Splash": "Splash", "DevStack": "DevStack", "IconLogo": "IconLogo", "Graph": "Graph" }, "data": {} } }));
    }
    componentDidUpdate() {
        this.postRender();
        document.dispatchEvent(new CustomEvent('sketch-artboard-update', { detail: { "name": "graph", "tage": "sk-graph", "selector": "sk-graph", "className": "Graph", "pageName": "sketch", "options": { "imageFormat": {}, "embedSvg": true, "imageScales": [1] }, "paths": { "splash": "splash", "dev-stack": "dev-stack", "icon-logo": "icon-logo", "graph": "graph" }, "classes": { "Splash": "Splash", "DevStack": "DevStack", "IconLogo": "IconLogo", "Graph": "Graph" }, "data": {} } }));
    }
    hide(duration = 300, delay = 0, visible = false) {
        this.fadeOut(this.el, duration, delay, visible);
    }
    show(duration = 300, delay = 0, display = 'block') {
        this.fadeIn(this.el, duration, delay, display);
    }
    setData(data) {
        this.data = data;
    }
    getElements() {
        this.elements = [];
        let ignoredArr = ['Shape', 'Oval', 'Rectangle', 'Line', 'Group'];
        let elements = this.el.querySelectorAll('*');
        Array.prototype.forEach.call(elements, (el) => {
            if (this.getAttributes(el)['id']) {
                let id = this.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 (element.id) {
                if (this.el.querySelector("[id='" + element.id + "']")) {
                    this.el.querySelector("[id='" + element.id + "']").addEventListener('click', (e) => {
                        this.svgElementClickHandler(e);
                    });
                }
            }
        });
    }
    parseHtml(html) {
        // remove whitespaces
        html = this.replaceAll(html, '{{ ', '{{');
        html = this.replaceAll(html, '{{  ', '{{');
        html = this.replaceAll(html, ' }}', '}}');
        html = this.replaceAll(html, '  }}', '}}');
        // set dynamic data
        if (this.data) {
            Object.keys(this.data).forEach((k) => {
                html = this.replaceAll(html, '{{' + k + '}}', this.data[k]);
            });
        }
        // html = between(html,'{{','}}');
        // \{\{(.*?)\}\}
        html = this.replaceAll(html, '{{}}', '');
        return html;
    }
    postRender() {
        var html;
        setTimeout((arg) => {
            if (this.redraw || !this.initialized) {
                html = this.html = this.parseHtml(this.html);
                this.el.innerHTML = html;
            }
            else {
                // html = this.html = this.parseHtml(this.el.innerHTML)
                // this.el.innerHTML = html;
                this.el.innerHTML = this.parseHtml(this.el.innerHTML);
            }
            setTimeout((arg) => {
                if (this.el.querySelector('svg')) {
                    this._svgElement = this.el.querySelector('svg');
                    this.renderSvg();
                    this.initialized = true;
                }
            }, 40);
            this.getElements();
        }, 20);
    }
    // todo: fixme: resize responsive scaling
    renderSvg() {
        const $svg = this._svgElement;
        const responsive = !(this.el.className.indexOf('img-fluid') === -1);
        let viewBox;
        if ($svg.getAttribute('viewBox')) {
            viewBox = $svg.getAttribute('viewBox');
        }
        let w, h;
        // fixme ??
        if (viewBox) {
            w = viewBox.split(' ')[2];
            h = viewBox.split(' ')[3];
            // if (responsive === true) {
            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('--------------');
            // console.log('responsive=' + responsive);
            // console.log('viewBox=' + viewBox);
            // console.log('svg attr: '+$svg.getAttribute('width')+' - '+$svg.getAttribute('height'));
        }
    }
    getAttributes(el) {
        let attrs = el.attributes, obj = {}, i = 0;
        for (; i < attrs.length; i++) {
            obj[attrs[i].name] = attrs[i].value;
        }
        return obj;
    }
    fadeIn(el, duration = 300, delay = 0, display = 'block') {
        let step = (1 / duration) * 10;
        el.style.opacity = '0';
        el.style.display = display;
        setTimeout(() => {
            (function fade() {
                let val = parseFloat(el.style.opacity);
                if (!((val += step) > 1)) {
                    el.style.opacity = val.toString();
                    requestAnimationFrame(fade);
                }
            })();
        }, delay);
    }
    fadeOut(el, duration = 300, delay = 0, visible = false) {
        let step = (1 / duration) * 10;
        el.style.opacity = '1';
        setTimeout(() => {
            (function fade() {
                let opacity = Number(el.style.opacity);
                opacity = opacity - step;
                el.style.opacity = opacity.toString();
                if (opacity < 0) {
                    if (visible === false) {
                        el.style.display = 'none';
                        el.style.opacity = '1';
                    }
                }
                else {
                    requestAnimationFrame(fade);
                }
            })();
        }, delay);
    }
    between(s, prefix, suffix) {
        // Usage:  var betweenResult = between('hello you guys','hello ',' guys');
        let i = s.indexOf(prefix);
        if (i >= 0) {
            s = s.substring(i + prefix.length);
        }
        else {
            return '';
        }
        if (suffix) {
            i = s.indexOf(suffix);
            if (i >= 0) {
                s = s.substring(0, i);
            }
            else {
                return '';
            }
        }
        return s;
    }
    replaceAll(src, str1, str2, ignore = false) {
        return String(src).replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g, '\\$&'), (ignore ? 'gi' : 'g')), (typeof (str2) === 'string') ? str2.replace(/\$/g, '$$$$') : str2);
    }
    render() {
        var data;
        if (this.dataJson) {
            data = this.data = JSON.parse(this.dataJson);
        }
        this.html = `<style amp-custom>

/* Sketch Template boiler plate CSS */
.sk-template {
	max-width: 100%;
	overflow: hidden;
}
.sk-ab {
	background-color: none;
	margin: 0 auto;
	transform: scale(1);
	transform-origin: 0 0;
	position: relative;
	overflow: hidden;
}
.sk-asset {
	position: absolute;
	background-repeat: no-repeat;
}
.sk-router-menu, .sk-template header  {
	text-align: center;
}
.sk-router-menu, ul {
	padding-left: 0;
	list-style: none;
}
/* Sketch Template css specific to graph */
/* graph-start */
.sk-ab.sk-ab-graph {
	width: 345px;
	height: 128px;
}

.sk-ab-graph .sk-asset.sk-section-2 {
	width: 345px;
	height: 128px;
	left: 0px;
	top: 0px;
}

/* graph-end */
</style>

<div data-sk-paths='{"splash":"splash","dev-stack":"dev-stack","icon-logo":"icon-logo","graph":"graph"}' class='sk-template sk-template-svg zoomed'>
	<div class='sk-ab sk-ab-graph'>
<div class="sketch-container">
<svg width="345px" height="128px" viewBox="0 0 345 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>graph</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="graph" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="section-2">
            <rect id="Rectangle" fill="#000000" opacity="0.1015625" x="0" y="0" width="345" height="128" rx="15"></rect>
            <g id="progress" transform="translate(25.000000, 64.000000)">
                <text id="label" font-family="OpenSans-Bold, Open Sans" font-size="12" font-weight="bold" fill="#4A4A4A">
                    <tspan x="0" y="13" class="sk-tspan-9">{{label}}</tspan>
                </text>
                <rect id="sk-progress-bar" fill="#F5A623" x="0" y="25" width="1" height="15"></rect>
                <rect id="Rectangle-2" stroke="#979797" x="0.5" y="25.5" width="299" height="14"></rect>
            </g>
            <g id="icon" transform="translate(140.000000, 15.000000)" fill="#FFAF00">
                <path d="M13.1257174,26.2347441 C13.4241596,25.9316651 13.4241596,25.4653898 13.1257174,25.1623108 L4.10358021,16 L13.1257174,6.8376892 C13.4241596,6.53461022 13.4241596,6.06833486 13.1257174,5.76525588 L11.9778628,4.59956748 C11.6794206,4.2964885 11.2202788,4.2964885 10.9218366,4.59956748 L0.223831648,15.4637833 C-0.0746105493,15.7668623 -0.0746105493,16.2331377 0.223831648,16.5362167 L10.9218366,27.4004325 C11.2202788,27.7035115 11.6794206,27.7035115 11.9778628,27.4004325 L13.1257174,26.2347441 Z M26.6933588,1.35895374 C26.8081443,0.962619682 26.5785734,0.542971859 26.1883028,0.426403019 L24.7649631,0.0300689643 C24.3976496,-0.0864998753 23.984422,0.146637804 23.8696365,0.542971859 L15.3066412,30.6410463 C15.1918557,31.0373803 15.4214266,31.4570281 15.8116972,31.573597 L17.2350369,31.969931 C17.6023504,32.0864999 18.015578,31.8533622 18.1303635,31.4570281 L26.6933588,1.35895374 Z M41.7761684,16.5362167 C42.0746105,16.2331377 42.0746105,15.7668623 41.7761684,15.4637833 L31.0781634,4.59956748 C30.7797212,4.2964885 30.3205794,4.2964885 30.0221372,4.59956748 L28.8742826,5.76525588 C28.5758404,6.06833486 28.5758404,6.53461022 28.8742826,6.8376892 L37.8964198,16 L28.8742826,25.1623108 C28.5758404,25.4653898 28.5758404,25.9316651 28.8742826,26.2347441 L30.0221372,27.4004325 C30.3205794,27.7035115 30.7797212,27.7035115 31.0781634,27.4004325 L41.7761684,16.5362167 Z" id="ÔÑ°"></path>
            </g>
        </g>
    </g>
</svg></div></div>
`;
        return (h("span", null));
    }
    static get is() { return "sk-graph"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        },
        "getElements": {
            "method": true
        },
        "hide": {
            "method": true
        },
        "redraw": {
            "type": Boolean,
            "attr": "redraw"
        },
        "setData": {
            "method": true
        },
        "show": {
            "method": true
        },
        "visible": {
            "type": Boolean,
            "attr": "visible"
        }
    }; }
    static get events() { return [{
            "name": "svgElementClick",
            "method": "svgElementClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
//# sourceMappingURL=graph.js.map