import { h } from '../webcomponents.core.js';

import './chunk-de721f0a.js';
import { d as Util, j as DomUtil } from './chunk-6163e267.js';

class JsonViewer {
    constructor() {
        this.jsonLoaded = false;
        this.allowCopy = true;
        this.jsonViewer = new JSONViewer();
    }
    componentDidLoad() {
        this.el.appendChild(this.jsonViewer.getContainer());
    }
    componentDidUnload() {
        delete this.jsonViewer;
    }
    render() {
        if (this.dataJson) {
            this.data = JSON.parse(this.dataJson);
            this.jsonViewer.showJSON(this.data, this.maxLevel || -1, this.collapseAt || -1);
        }
        if (this.jsonUrl && !this.jsonLoaded) {
            Util.fetchJson(this.jsonUrl).then((json) => {
                this.data = json;
                this.jsonLoaded = true;
                this.jsonViewer.showJSON(this.data, this.maxLevel || -1, this.collapseAt || -1);
            });
        }
        return (h("div", null, this.allowCopy == true &&
            h("div", { class: 'btn-copy', onClick: () => DomUtil.copyToClipboard(JSON.stringify(this.data)) },
                h("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
                    h("title", null, "copy"),
                    h("path", { d: "M20 8h-9c-1.7 0-3 1.3-3 3v9c0 1.7 1.3 3 3 3h9c1.7 0 3-1.3 3-3v-9c0-1.7-1.3-3-3-3zM21 20c0 0.6-0.4 1-1 1h-9c-0.6 0-1-0.4-1-1v-9c0-0.6 0.4-1 1-1h9c0.6 0 1 0.4 1 1v9z" }),
                    h("path", { d: "M5 14h-1c-0.6 0-1-0.4-1-1v-9c0-0.6 0.4-1 1-1h9c0.6 0 1 0.4 1 1v1c0 0.6 0.4 1 1 1s1-0.4 1-1v-1c0-1.7-1.3-3-3-3h-9c-1.7 0-3 1.3-3 3v9c0 1.7 1.3 3 3 3h1c0.6 0 1-0.4 1-1s-0.4-1-1-1z" })))));
    }
    static get is() { return "ema-json-viewer"; }
    static get properties() { return {
        "allowCopy": {
            "type": Boolean,
            "attr": "allow-copy"
        },
        "collapseAt": {
            "type": Number,
            "attr": "collapse-at"
        },
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        },
        "jsonLoaded": {
            "state": true
        },
        "jsonUrl": {
            "type": String,
            "attr": "json-url"
        },
        "maxLevel": {
            "type": Number,
            "attr": "max-level"
        }
    }; }
    static get style() { return ":root{--ema-color:#343a40;--ema-primary:#007bff;--ema-secondary:#6c757d;--ema-success:#28a745;--ema-info:#17a2b8;--ema-warning:#ffc107;--ema-danger:#dc3545;--ema-light:#f8f9fa;--ema-dark:#343a40;--ema-background:#fff;--ema-background-diap:rgba(29,29,29,0.97);--ema-border-color:#c5c9cd;--ema-border:1px solid #c5c9cd;--ema-border-radius:3px 3px 3px 3px;--ema-box-shadow:1px 1px 10px 1px #ccc;--ema-margin:0.25rem;--ema-margin-sm:0.5rem;--ema-margin-md:1rem;--ema-margin-lg:1.5rem;--ema-margin-xl:2rem;--ema-padding:0.25rem;--ema-padding-sm:0.5rem;--ema-padding-md:1rem;--ema-padding-lg:1.5rem;--ema-padding-xl:2rem;--ema-gray-100:#f8f9fa;--ema-gray-200:#e9ecef;--ema-gray-300:#dee2e6;--ema-gray-400:#ced4da;--ema-gray-500:#adb5bd;--ema-gray-600:#868e96;--ema-gray-700:#495057;--ema-gray-800:#343a40;--ema-gray-900:#212529}ema-json-viewer .btn-copy{float:right;cursor:pointer}ema-json-viewer .json-viewer{color:#262626;padding-left:20px}ema-json-viewer .json-viewer ul{list-style-type:none;margin:0 0 0 1px;border-left:1px dotted #ccc;padding-left:2em}ema-json-viewer .json-viewer .hide{display:none}ema-json-viewer .json-viewer ul li .type-date,ema-json-viewer .json-viewer ul li .type-string{color:#0b7500}ema-json-viewer .json-viewer ul li .type-boolean{color:#1a01cc;font-weight:700}ema-json-viewer .json-viewer ul li .type-number{color:#1a01cc}ema-json-viewer .json-viewer ul li .type-null{color:red}ema-json-viewer .json-viewer a.list-link{color:#000;text-decoration:none;position:relative}ema-json-viewer .json-viewer a.list-link:before{color:#aaa;content:\"\\25BC\";position:absolute;display:inline-block;width:1em;left:-1em}ema-json-viewer .json-viewer a.list-link.collapsed:before{content:\"\\25B6\"}ema-json-viewer .json-viewer a.list-link.empty:before{content:\"\"}ema-json-viewer .json-viewer .items-ph{color:#aaa;padding:0 1em}ema-json-viewer .json-viewer .items-ph:hover{text-decoration:underline}"; }
}
var JSONViewer = (function () {
    var JSONViewer = function () {
        this._dom = {};
        this._dom.container = document.createElement("pre");
        this._dom.container.classList.add("json-viewer");
    };
    JSONViewer.prototype.showJSON = function (json, maxLvl, colAt) {
        if (!maxLvl) {
            maxLvl = -1;
        }
        if (!colAt) {
            colAt = -1;
        }
        let jsonData = this._processInput(json);
        let walkEl = this._walk(jsonData, Number(maxLvl), Number(colAt), 0);
        this._dom.container.innerHTML = "";
        this._dom.container.appendChild(walkEl);
    };
    JSONViewer.prototype.getContainer = function () {
        return this._dom.container;
    };
    JSONViewer.prototype._processInput = function (json) {
        if (json && typeof json === "object") {
            return json;
        }
        else {
            throw "Input value is not object or array!";
        }
    };
    JSONViewer.prototype._walk = function (value, maxLvl, colAt, lvl) {
        var frag = document.createDocumentFragment();
        var isMaxLvl = maxLvl >= 0 && lvl >= maxLvl;
        var isCollapse = colAt >= 0 && lvl >= colAt;
        switch (typeof value) {
            case "object":
                if (value) {
                    var isArray = Array.isArray(value);
                    var items = isArray ? value : Object.keys(value);
                    if (lvl === 0) {
                        var rootCount = this._createItemsCount(items.length);
                        var rootLink = this._createLink(isArray ? "[" : "{");
                        if (items.length) {
                            rootLink.addEventListener("click", function () {
                                if (isMaxLvl)
                                    return;
                                rootLink.classList.toggle("collapsed");
                                rootCount.classList.toggle("hide");
                                this._dom.container.querySelector("ul").classList.toggle("hide");
                            }.bind(this));
                            if (isCollapse) {
                                rootLink.classList.add("collapsed");
                                rootCount.classList.remove("hide");
                            }
                        }
                        else {
                            rootLink.classList.add("empty");
                        }
                        rootLink.appendChild(rootCount);
                        frag.appendChild(rootLink);
                    }
                    if (items.length && !isMaxLvl) {
                        var len = items.length - 1;
                        var ulList = document.createElement("ul");
                        ulList.setAttribute("data-level", lvl);
                        ulList.classList.add("type-" + (isArray ? "array" : "object"));
                        items.forEach(function (key, ind) {
                            var item = isArray ? key : value[key];
                            var li = document.createElement("li");
                            if (typeof item === "object") {
                                if (!item || item instanceof Date) {
                                    li.appendChild(document.createTextNode(isArray ? "" : key + ": "));
                                    li.appendChild(this._createSimple(item ? item : null));
                                }
                                else {
                                    var itemIsArray = Array.isArray(item);
                                    var itemLen = itemIsArray ? item.length : Object.keys(item).length;
                                    if (!itemLen) {
                                        li.appendChild(document.createTextNode(key + ": " + (itemIsArray ? "[]" : "{}")));
                                    }
                                    else {
                                        var itemTitle = (typeof key === "string" ? key + ": " : "") + (itemIsArray ? "[" : "{");
                                        var itemLink = this._createLink(itemTitle);
                                        var itemsCount = this._createItemsCount(itemLen);
                                        if (maxLvl >= 0 && lvl + 1 >= maxLvl) {
                                            li.appendChild(document.createTextNode(itemTitle));
                                        }
                                        else {
                                            itemLink.appendChild(itemsCount);
                                            li.appendChild(itemLink);
                                        }
                                        li.appendChild(this._walk(item, maxLvl, colAt, lvl + 1));
                                        li.appendChild(document.createTextNode(itemIsArray ? "]" : "}"));
                                        var list = li.querySelector("ul");
                                        var itemLinkCb = function () {
                                            itemLink.classList.toggle("collapsed");
                                            itemsCount.classList.toggle("hide");
                                            list.classList.toggle("hide");
                                        };
                                        itemLink.addEventListener("click", itemLinkCb);
                                        if (colAt >= 0 && lvl + 1 >= colAt) {
                                            itemLinkCb();
                                        }
                                    }
                                }
                            }
                            else {
                                if (!isArray) {
                                    li.appendChild(document.createTextNode(key + ": "));
                                }
                                li.appendChild(this._walk(item, maxLvl, colAt, lvl + 1));
                            }
                            if (ind < len) {
                                li.appendChild(document.createTextNode(","));
                            }
                            ulList.appendChild(li);
                        }, this);
                        frag.appendChild(ulList);
                    }
                    else if (items.length && isMaxLvl) {
                        var itemsCount = this._createItemsCount(items.length);
                        itemsCount.classList.remove("hide");
                        frag.appendChild(itemsCount);
                    }
                    if (lvl === 0) {
                        if (!items.length) {
                            var itemsCount = this._createItemsCount(0);
                            itemsCount.classList.remove("hide");
                            frag.appendChild(itemsCount);
                        }
                        frag.appendChild(document.createTextNode(isArray ? "]" : "}"));
                        if (isCollapse) {
                            frag.querySelector("ul").classList.add("hide");
                        }
                    }
                    break;
                }
            default:
                frag.appendChild(this._createSimple(value));
                break;
        }
        return frag;
    };
    JSONViewer.prototype._createSimple = function (value) {
        var spanEl = document.createElement("span");
        var type = typeof value;
        var txt = value;
        if (type === "string") {
            txt = '"' + value + '"';
        }
        else if (value === null) {
            type = "null";
            txt = "null";
        }
        else if (value === undefined) {
            txt = "undefined";
        }
        else if (value instanceof Date) {
            type = "date";
            txt = value.toString();
        }
        spanEl.classList.add("type-" + type);
        spanEl.innerHTML = txt;
        return spanEl;
    };
    JSONViewer.prototype._createItemsCount = function (count) {
        var itemsCount = document.createElement("span");
        itemsCount.classList.add("items-ph");
        itemsCount.classList.add("hide");
        itemsCount.innerHTML = this._getItemsTitle(count);
        return itemsCount;
    };
    JSONViewer.prototype._createLink = function (title) {
        var linkEl = document.createElement("a");
        linkEl.classList.add("list-link");
        linkEl.href = "javascript:void(0)";
        linkEl.innerHTML = title || "";
        return linkEl;
    };
    JSONViewer.prototype._getItemsTitle = function (count) {
        var itemsTxt = count > 1 || count === 0 ? "items" : "item";
        return (count + " " + itemsTxt);
    };
    return JSONViewer;
})();

export { JsonViewer as EmaJsonViewer };
