import {World} from "./world.js";

const diorama_template = document.createElement('template');
diorama_template.innerHTML = `<canvas></canvas>`;

customElements.define('mc-world', class extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.data = new World(this.innerText);

        if (this.parentElement.tagName.toLowerCase() === 'mc-frame') {
            this.parentElement.world = this;
        }
    }
});

customElements.define('mc-frame', class extends HTMLElement {
    static get observedAttributes() {
        return ['worldid'];
    }

    constructor() {
        super();

        if (this.parentElement.tagName.toLowerCase() === 'mc-diorama') {
            this.parentElement.frame = this;
        }
    }

    attributeChangedCallback(name, old, val) {
        if (name === 'worldid') {
            let elem = document.getElementById(val);
            console.assert(elem.tagName === 'MC-WORLD', 'worldid does not refer to a mc-world.');
            this.world = elem;
        }
    }

    connectedCallback() {
        if (this.parentElement.tagName.toLowerCase() === 'mc-diorama') {
            this.parentElement.frame = this;
        }
    }
});

customElements.define('mc-diorama', class extends HTMLElement {
    static get observedAttributes() {
        return ['frameid'];
    }

    constructor() {
        super();

        const shadow = this.attachShadow({mode: 'open'});
        shadow.appendChild(diorama_template.content.cloneNode(true));
    }

    connectedCallback() {
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'frameid') {
            let elem = document.getElementById(newValue);
            console.assert(elem.tagName === 'MC-FRAME', 'frameid does not refer to a mc-frame.');
            this.frame = elem.frame;
        }
    }
});