class Menu {
    #application;
    #root;
    #items;

    constructor(application) {
        this.#application = application;
        this.#root = document.querySelector('#menu');
        this.#items = this.#root.querySelectorAll('input[data-page]');
        this.#items.forEach(item => {
            item.addEventListener('click', () => this.#application.open(item.dataset.page));
        });
    };

    setActive(pageId) {
        this.#items.forEach(item => item.classList.remove('active'));
        this.#items.forEach(item => item.dataset.page === pageId ? item.classList.add('active') : null);
    };
}

class Application {
    static DEFAULT_PAGE = 'dashboard';

    #inputContainer;
    #outputContainer;
    #menu;
    #pageId;

    constructor() {
        this.#inputContainer = document.querySelector('#input');
        this.#outputContainer = document.querySelector('#output');
        this.#menu = new Menu(this);
    };

    open(pageId) {
        this.#pageId = pageId;
        document.querySelectorAll('#input [data-page]').forEach(page => page.classList.remove('active'));
        document.querySelector(`#input [data-page="${pageId}"]`).classList.add('active');
        document.querySelectorAll('#output [data-page]').forEach(page => page.classList.remove('active'));
        this.#menu.setActive(pageId);
    };
}