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

class AppRoot extends LitElement {
    #hydrated = new StoreController(this, store, s => s._hydrated);
    #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;
        }
        
        .loading {
            display: grid;
            place-items: center;
            height: 100vh;
            opacity: 0.4;
        }
    `;

    render() {
        if (!this.#hydrated.value) {
            return html`<div class="loading">loading...</div>`;
        }
        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);