import { view } from "./view.js";
import { loading_screen } from "./loading-screen.js";

export class screen {
    #root;
    #view;
    
    constructor(root) {
        this.#root = root;
    }

    get root() {
        return this.#root;
    }

    get view() {
        return this.#view;
    }

    get #loading() {
        return new loading_screen();
    }

    #change_view(target) {
        if (this.#view !== undefined) {
            this.#view.destroy();
        }

        this.#view = target;
        const content = this.#view.show();

        if (!(content instanceof HTMLElement)) {
            throw new TypeError("View show not return HTML Element.");
        }

        while (this.root.lastChild) {
            this.root.lastChild.remove();
        }

        this.root.appendChild(content);
        this.#loading.hide();
    }

    set view(target) {
        if (!(target instanceof view)) {
            throw new Error("Target must be instance of view.");
        }

        if (this.#loading.visible) {
            this.#change_view(target)
            return;
        }

        this.#loading.show();

        setTimeout(() => {
            this.#change_view(target);
        }, this.#loading.time);
    }
}