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

class AppRoot extends LitElement {
    static properties = {
        user: { type: Object, state: true },
        route: { type: String, state: true },
        items: { type: Array, state: true }
    };

    constructor() {
        super();
        this.user = null;
        this.route = 'home';
        this.items = [];
    }

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

    #navigate(route) {
        this.route = route;
    }

    #addItem(item) {
        this.items = [...this.items, item];
    }

    #removeItem(id) {
        this.items = this.items.filter(i => i.id !== id);
    }

    render() {
        return html`
            <nav-bar 
                .user=${this.user}
                .route=${this.route}
                @navigate=${(e) => this.#navigate(e.detail.route)}
            ></nav-bar>
            <main>${this.#renderRoute()}</main>
        `;
    }

    #renderRoute() {
        switch (this.route) {
            case "home": 
                return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
            case "items": 
                return html`<page-items 
                    .items=${this.items}
                    @add-item=${(e) => this.#addItem(e.detail.item)}
                    @remove-item=${(e) => this.#removeItem(e.detail.id)}
                ></page-items>`;
            default: 
                return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
        }
    }
}

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