class NetGraphElement extends HTMLElement {

    static get observedAttributes() {
        return ['G'];
    }

    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.content_div = document.createElement('div');
        this.shadowRoot.appendChild(this.content_div);
        this.slot_ele = document.createElement('slot');
        this.shadowRoot.appendChild(this.slot_ele);
        this.G = new jsnx.MultiDiGraph();
    }

    connectedCallback(){
        let style = this.hasAttribute('style') ? this.getAttribute('style') : "";
        let weighted = this.hasAttribute('weighted') ? JSON.parse(this.getAttribute('weighted')) : false;
        let withLabels = this.hasAttribute('withLabels') ? JSON.parse(this.getAttribute('withLabels')) : true;

        this.content_div.style = style;
        let that = this;



        jsnx.draw(that.G, {
            element: that.content_div,
            weighted,
            withLabels,
            labelStyle: {fill: 'white'},
            edgeStyle: {
                'stroke-width': 5,
                fill: d => d.data[0].color
            },
            nodeStyle: {
                fill: d => d.data.color
            },
            nodeAttr: {
                r: d => d.data.radius | 10
            }
        }, true); //true ensures redrawing


        this.slot_ele.addEventListener('slotchange', e => {
            try{
                let text = that.innerText.trim();
                let{nodes, edges} = JSON.parse(text);
                that.G.addNodesFrom(nodes, {color: 'black'}  );
                that.G.addEdgesFrom(edges, {color: 'black'}  );
            }
            catch(e){

            }

            
            jsnx.draw(that.G, {
                element: that.content_div,
                weighted,
                withLabels,
                labelStyle: {fill: 'white'},
                edgeStyle: {
                    'stroke-width': 5,
                    fill: d => d.data[0].color
                },
                nodeStyle: {
                    fill: d => d.data.color
                },
                nodeAttr: {
                    r: d => d.data.radius | 10
                }
            }, true); //true ensures redrawing
            


            that.slot_ele.style.display = "none";
            that.content_div.children[0].setAttribute("width", that.content_div.style.width);
            that.content_div.children[0].setAttribute("height", that.content_div.style.height);
        });
    }

    disconnectedCallback() {

    }

}

customElements.define('net-graph', NetGraphElement);