import { Util } from '@ema/core';
export class Debugger {
    constructor() {
        this.history = [];
        this.viewerLabel = 'Select a route to inspect';
        this.addToHistory = true;
        this.isActive = false;
        this.isOpen = false;
        this.isRunning = true;
        this.jsonLoaded = false;
        this.type = "uaas";
        this.historySize = 100;
    }
    componentDidLoad() {
        let event = new CustomEvent("initDebugger", {
            detail: {}
        });
        window.dispatchEvent(event);
        document.onkeydown = (e) => this.handleKeyDown(e);
    }
    setCurrentItem(index, addToHistory = true) {
        this.addToHistory = addToHistory;
        this.currentItem = this.history[index];
        if (this.type === 'dwp') {
            if (this.currentItem.response)
                this.currentItem.config = this.currentItem.response.config;
            this.viewerLabel = 'URL: ' + this.currentItem.config.url.replace(this.apiUrl, '');
        }
        if (this.type === 'uaas') {
            this.viewerLabel = 'URL: ' + this.currentItem.config.url.replace(this.apiUrl, '');
        }
    }
    onListItemClick(index, addToHistory = false) {
        let divs = document.querySelectorAll('.url-list li'), i;
        for (i = 0; i < divs.length; ++i) {
            let el = divs[i];
        }
        this.setCurrentItem(index, addToHistory);
    }
    handleKeyDown(e) {
        let ctrlPressed;
        let altPressed;
        let shiftPressed;
        let evt = (e == null ? event : e);
        shiftPressed = evt.shiftKey;
        altPressed = evt.altKey;
        ctrlPressed = evt.ctrlKey;
        if ((shiftPressed || altPressed || ctrlPressed)
            && (evt.keyCode < 16 || evt.keyCode > 18))
            if (ctrlPressed && evt.keyCode == 68) {
                this.toggle();
            }
        return true;
    }
    pushHistory(value) {
        if (this.history.length >= Number(this.historySize)) {
            this.history.pop();
        }
        this.history.unshift(value);
    }
    async open() {
        this.host.style.display = 'block';
        this.isOpen = true;
    }
    async close() {
        this.host.style.display = 'none';
        this.isOpen = false;
    }
    async toggle() {
        this.isOpen ? this.close() : this.open();
    }
    async run() {
        this.addToHistory = true;
        this.isRunning = true;
    }
    async pause() {
        this.addToHistory = false;
        this.isRunning = false;
    }
    render() {
        if (this.isRunning) {
            if (this.dataJson) {
                this.data = JSON.parse(this.dataJson);
                this.addToHistory ? this.pushHistory(this.data) : this.addToHistory = true;
            }
            if (this.jsonUrl && !this.jsonLoaded) {
                Util.fetchJson(this.jsonUrl).then((res) => {
                    this.data = res;
                    this.addToHistory ? this.pushHistory(this.data) : this.addToHistory = false;
                    this.jsonLoaded = true;
                });
            }
        }
        return (h("div", null,
            h("ema-card", null,
                h("ema-card-header", null,
                    h("span", { class: "ema-card-header-title" },
                        "Debugger: ",
                        this.type),
                    h("span", { class: "ema-card-header-subtitle" },
                        "Api url = ",
                        this.apiUrl),
                    h("div", { class: 'btn-close', onClick: () => this.close() },
                        h("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "22", height: "28", viewBox: "0 0 22 28" },
                            h("title", null, "close"),
                            h("path", { d: "M20.281 20.656c0 0.391-0.156 0.781-0.438 1.062l-2.125 2.125c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-4.594-4.594-4.594 4.594c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-2.125-2.125c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l4.594-4.594-4.594-4.594c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l2.125-2.125c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l4.594 4.594 4.594-4.594c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l2.125 2.125c0.281 0.281 0.438 0.672 0.438 1.062s-0.156 0.781-0.438 1.062l-4.594 4.594 4.594 4.594c0.281 0.281 0.438 0.672 0.438 1.062z" }))),
                    this.isRunning ? (h("div", { class: 'btn-pause', onClick: () => this.pause() },
                        h("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 22 22" },
                            h("title", null, "pause"),
                            h("path", { d: "M2.75 2.75h6.875v16.5h-6.875zM12.375 2.75h6.875v16.5h-6.875z" })))) : (h("div", { class: 'btn-play', onClick: () => this.run() },
                        h("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "22", height: "22", viewBox: "0 0 22 22" },
                            h("title", null, "play"),
                            h("path", { d: "M4.125 2.75l13.75 8.25-13.75 8.25z" }))))),
                h("ema-card-content", { class: 'url-list' }, this.type === 'dwp' &&
                    h("ul", null, this.history.map((item, i) => h("li", { "data-index": i, onClick: (e) => this.onListItemClick(i, false) }, item.type + ': ' + item.config.url.replace(this.apiUrl, ''))))),
                h("ema-card-footer", null,
                    h("ema-collapsible", { label: this.viewerLabel, collapsed: false },
                        h("div", null,
                            this.currentItem && !this.currentItem.response &&
                                h("div", null,
                                    h("div", null,
                                        "request: ",
                                        this.currentItem.config.method),
                                    h("ema-json-viewer", { "data-json": JSON.stringify(this.currentItem.config), "allow-copy": 'true', "max-level": this.maxLevel || -1, "collapse-at": this.collapseAt || -1 })),
                            this.currentItem && this.currentItem.response &&
                                h("div", null,
                                    h("div", null, "response:"),
                                    h("ema-json-viewer", { "data-json": JSON.stringify(this.currentItem.response), "allow-copy": 'true', "max-level": this.maxLevel || -1, "collapse-at": this.collapseAt || -1 }))))))));
    }
    static get is() { return "ema-debugger"; }
    static get properties() { return {
        "apiUrl": {
            "type": String,
            "attr": "api-url"
        },
        "close": {
            "method": true
        },
        "collapseAt": {
            "type": Number,
            "attr": "collapse-at"
        },
        "currentItem": {
            "state": true
        },
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "historySize": {
            "type": Number,
            "attr": "history-size"
        },
        "host": {
            "elementRef": true
        },
        "isActive": {
            "state": true
        },
        "isOpen": {
            "state": true
        },
        "isRunning": {
            "state": true
        },
        "jsonLoaded": {
            "state": true
        },
        "jsonUrl": {
            "type": String,
            "attr": "json-url"
        },
        "maxLevel": {
            "type": Number,
            "attr": "max-level"
        },
        "open": {
            "method": true
        },
        "pause": {
            "method": true
        },
        "run": {
            "method": true
        },
        "toggle": {
            "method": true
        },
        "type": {
            "type": String,
            "attr": "type"
        }
    }; }
    static get style() { return "/**style-placeholder:ema-debugger:**/"; }
}
