import { LitElement, html, css } from "lit";
import { store} from "../store/index.js";
import { StoreController } from "../controllers/store.js";
import "./nav-bar.js";
import "./page-home.js";
import "./page-items.js";

class AppRoot extends LitElement {
    #user = new StoreController(this, store, s => s.user);
    #route = new StoreController(this, store, s => s.route);

    static styles = css`
        :host {
            display: block;
            min-height: 100vh;
        }
    `;

    render() {
        return html`
            <nav-bar .user=${this.#user.value}></nav-bar>
            <main>${this.#renderRoute()}</main>
        `;
    }

    #renderRoute() {
        switch (this.#route.value) {
            case "home": return html`<page-home></page-home>`;
            case "items": return html`<page-items></page-items>`;
            default: return html`<page-home></page-home>`;
        }
    }
}

customElements.define('app-root', AppRoot);