class Banner {
    constructor() {
        this.element = null;

        this.title = "";
        this.text = "";
    }

    updateText(newText) {
        this.text = newText;
        this.element.querySelector("#banner-text").innerText = this.text;
    }

    updateTitle(newTitle) {
        this.title = newTitle;
        this.element.querySelector("#banner-title").innerText = this.title;
    }

    mountOn(target) {
        if (this.element)
            return; // Already mounted
        
        this.element = document.createRange().createContextualFragment(`
            <div class="Card Card-ui-bottom Card-centered-text">
                <h2 id="banner-title"></h2>
                <p id="banner-text"></p>
            </div>
        `).children[0];

        target.appendChild(this.element);
    }

    unmount() {
        if (!this.element)
            return; // Already unmounted

        this.element.parentElement.removeChild(this.element);
        this.element = null;
    }
}

export default Banner;