"use strict";

import { LitElement, html, css } from "lit-element";
import { state } from "../state.js";
import { pad, formatDate, round, get } from "../util.js";
import { archive } from "../archive.js";

import "@authentic/mwc-icon";
import "../card.js";
import "../spinner.js";

class TemperatureLive extends LitElement {
	constructor() {
		super(...arguments);
		this._cachedDayArchive = {};
		state.subscribe(this.requestUpdate.bind(this));
		archive.subscribe(this.requestUpdate.bind(this));
	}

	render() {
		const config = state.config.views.filter(view => view.url == this.viewid)[0];
		return html`
			${state.data[config.sensors[0].device] ? html`
				<div id="connection-status">
					${state.connected ? html`
						<p><mwc-icon>cloud_queue</mwc-icon> Connected</p>
					` : html`
						<p><mwc-icon>cloud_off</mwc-icon> Disconnected</p>
						<p class="lastupdate">last updated ${formatDate(state.data.lastUpdated)}</p>
					`}
				</div>
				<smarthome-card>
					<div class="table">
						<div class="table-row table-head">
							<div class="table-column" style="width: 50%;">Name</div>
							<div class="table-column" style="width: 29%;">Temperature</div>
							<div class="table-column" style="width: 21%;">Humidity</div>
						</div>
						${config.sensors.map(d => html`
							<div class="table-row">
								<div class="table-column" style="width: 50%;">${d.name}${state.data[d.device].weakBattery ? html` <mwc-icon>battery_alert</mwc-icon>` : html``}</div>
								<div class="table-column" style="width: 29%;">${round(state.data[d.device].temperature, 2)}°C</div>
								<div class="table-column" style="width: 21%;">${(state.data[d.device].humidity != -1 ) ? html`${round(state.data[d.device].humidity, 2)}%` : html`-` }</div>
							</div>
						`)}
					</div>
				</smarthome-card>
			` : html`
				<smarthome-spinner>Trying to connect...</smarthome-spinner>
			`}
		`;
	}

	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;
			}
			#connection-status mwc-icon {
				padding-right: .5em;
			}
			#connection-status {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			#connection-status>p {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			#connection-status>p.lastupdate {
				font-size: 1em;
			}
			.table {
				display: flex;
				flex-direction: column;
			}
			.table-row {
				display: flex;
				flex-direction: row;
				width: 100%;
			}
			.table-column {
				padding: 1em;
				height: 1em;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			.table-row {
				background-color: #ddd;
			}
			.table-row:nth-child(2n) {
				background-color: #fff;
			}
			@media (min-width: 600px) {
				#connection-status {
					margin-top: 20px;
				}
			}
		`;
	}

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

customElements.define("smarthome-temperature-live", TemperatureLive);