"use strict";

import { LitElement, html, css } from "lit-element";

import "./history.js";
import "./live.js";

const pages = {
	"live": { name: "Live", content: id => html`<smarthome-temperature-live .viewid="${id}"></smarthome-temperature-live>` },
	//"history": { name: "History", content: id => html`<smarthome-temperature-history .viewid="${id}"></smarthome-temperature-history>` },
};

class Temperature extends LitElement {
	constructor() {
		super(...arguments);
		this.activePage = pages["live"];
	}

	_setPage(path) {
		return () => {
			this.activePage = pages[path];
			this.requestUpdate();
		};
	}

	render() {
		return html`
			<div id="pages">
				${Object.entries(pages).map(([path, page]) => html`
					<a href="#/temperature" class="page-link ${this.activePage == page ? "active" : "inactive"}" @click=${this._setPage(path)}>
						${page.name}
					</a>
				`)}
			</div>
			${this.activePage.content(this.viewid)}
		`;
	}

	static get styles() {
		return css`
			:host {
				display: flex;
				flex-direction: column;
				--mdc-theme-on-primary: white;
				--mdc-theme-primary: #43a047;
				--mdc-theme-on-secondary: white;
				--mdc-theme-secondary: #616161;
			}

			#pages {
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
			.page-link {
				padding: .5em;
				margin: .5em;
				color: black;
				text-decoration: none;
			}
			.page-link.active {
				border-bottom: 4px solid #43a047;
			}
		`;
	}

	static get properties() {
		return {
			viewid: { type: String }
		};
	}
}

customElements.define("smarthome-temperature", Temperature);