"use strict";

import { LitElement, html, css } from "lit-element";
import { state } from "./state.js";

import "@authentic/mwc-top-app-bar";
import "@authentic/mwc-card";
import "@authentic/mwc-icon-button";
import "@authentic/mwc-icon";
import "@authentic/mwc-drawer";

import "./switches.js";
import "./power-meter/index.js";
import "./temperature/index.js";
import "./departures.js";
import "./settings.js";
import "./spinner.js";
import "./row.js";
import "./prompt.js";

const viewTypes = {
	"noconfig": id => html`<smarthome-spinner>Waiting for initial connection...</smarthome-spinner>`,
	"switches": id => html`<smarthome-switches .viewid="${id}"></smarthome-switches>`,
	"powermeter": id => html`<smarthome-power-meter .viewid="${id}"></smarthome-power-meter>`, icon: "power" ,
	"temperature": id => html`<smarthome-temperature .viewid="${id}"></smarthome-temperature>`, icon: "thermometer" ,
	"departures": id => html`<smarthome-departures .viewid="${id}"></smarthome-departures>`,
	"redirect": id => html`<smarthome-spinner .viewid="${id}">Redirecting...</smarthome-spinner>}`,
	"settings": id => html`<smarthome-settings></smarthome-settings>`,
};

const notFoundView = { name: "Sorry", content: html`<h3>The page you tried to access does not exist</h3>` };

class SmartHomeLayout extends LitElement {
	constructor() {
		super(...arguments);
		window.addEventListener("hashchange", this._handleHashChange.bind(this));
		this._handleHashChange();
		state.subscribe(this.requestUpdate.bind(this));
	}

	async _handleHashChange() {
		this.activeView = state.config.views.filter(view => `#/${view.url}` == window.location.hash)[0] || state.config.views[0];
		await this.requestUpdate();
		const drawer = this.shadowRoot.querySelector("mwc-drawer");
		if (drawer) drawer.open = false;
	}

	_handleNavEvent(evt) {
		const drawer = this.shadowRoot.querySelector("mwc-drawer");
		drawer.open = !drawer.open;
		this.shadowRoot.getElementById("menu-button").blur();
	}

	render() {
		if (this.activeView.type === "noconfig") {
			window.location.hash = `#/${state.config.views[0].url}`;
		}
		return state.accessToken ? html`
			<mwc-drawer type="modal">
				<div id="drawer-content">
					${state.config.views.map(view => html`
						<a href="${view.type == "redirect" ? view.destination : '#/' + view.url}" class="${this.activeView === view ? "active" : "inactive"}">
							<mwc-icon>${view.icon}</mwc-icon>
							<span>${view.name}</span>
							<mwc-ripple></mwc-ripple>
						</a>
					`)}
				</div>
			</mwc-drawer>
			<mwc-top-app-bar type="fixed" @MDCTopAppBar:nav="${this._handleNavEvent}">
				<div id="title-container" slot="title">
					<span>${this.activeView.name}</span>
				</div>
				<mwc-icon-button id="menu-button" slot="navigationIcon" icon="menu"></mwc-icon-button>
			</mwc-top-app-bar>
			<div class="top-app-bar-adjust"></div>
			${viewTypes[this.activeView.type](this.activeView.url)}
		` : html`
			<mwc-top-app-bar type="fixed" @MDCTopAppBar:nav="${this._handleNavEvent}">
				<div id="title-container" slot="title">
					<span>Authorization</span>
				</div>
				<mwc-icon id="menu-button" slot="navigationIcon">lock</mwc-icon>
			</mwc-top-app-bar>
			<div class="top-app-bar-adjust"></div>
			<smarthome-prompt></smarthome-prompt>
		`;
	}

	static get styles() {
		return css`
			:host {
				font-family: sans-serif;
				--mdc-theme-on-primary: white;
				--mdc-theme-primary: #43a047;
				--mdc-theme-on-secondary: white;
				--mdc-theme-secondary: #616161;
				background-color: #ccc;
			}
			mwc-top-app-bar {
				position: fixed;
				z-index: 10;
			}
			.top-app-bar-adjust {
				box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
				position: relative;
				z-index: 1;
				height: 56px;
			}
			@media (min-width: 600px) {
				.top-app-bar-adjust {
					height: 64px;
				}
				#title-container {
					width: 100vw;
					padding-left: calc((100% - 450px) / 2 + 20px);
				}
				#menu-button {
					position: absolute;
					padding-left: calc(((100% - 450px) / 2) - 75px);
					z-index: 10;
				}
			}
			mwc-drawer {
				position: relative;
				z-index: 11;
			}

			#drawer-content {
				display: flex;
				flex-direction: column;
			}
			#drawer-content a {
				text-decoration: none;
				color: black;
				display: flex;
				flex-direction: row;
				margin: 0;
				align-items: center;
				border-bottom: 1px solid #ccc;
			}
			#drawer-content a mwc-icon {
				padding: .7em;
			}

			#drawer-content a.active {
				background-color: #ddd;
			}
		`;
	}
}

customElements.define("smarthome-layout", SmartHomeLayout);