"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 PowerMeterLive extends LitElement {
	constructor() {
		super(...arguments);
		this._cachedDayArchive = {};
		state.subscribe(this.requestUpdate.bind(this));
		archive.subscribe(this.requestUpdate.bind(this));
	}

	getImport(d) {
		const currentValue = state.data[d.device].import;
		const now = new Date();
		const filename = `day/${d.device}_${now.getFullYear()}_${pad(now.getMonth() + 1, 2)}`;
		if (this._cachedDayArchive[filename] !== now.getDate()) delete archive.data[filename];
		archive.load(`day/${d.device}_${now.getFullYear()}_${pad(now.getMonth() + 1, 2)}`);
		this._cachedDayArchive[filename] = now.getDate();
		const lastValue = get(archive.data, [filename, `${now.getFullYear()}${pad(now.getMonth() + 1, 2)}${pad(now.getDate() - 1, 2)}`, "totalImported" ]);
		return currentValue && lastValue ? currentValue - lastValue : 0;
	}

	render() {
		const config = state.config.views.filter(view => view.url == this.viewid)[0];
		const sum = config.meters.reduce((acc, d) => {
			if (state.data[d.device].power) acc.power += state.data[d.device].power;
			if (state.data[d.device].import) acc.import += state.data[d.device].import;
			const totalImport = this.getImport(d);
			if (totalImport) acc.totalImport += totalImport;
			return acc;
		}, { power: 0, import: 0, totalImport: 0 });
		return html`
			${state.data[config.meters[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">Name</div>
							<div class="table-column">Voltage</div>
							<div class="table-column">Power</div>
							<div class="table-column">Power Factor</div>
							<div class="table-column">Frequency</div>
							<div class="table-column">Total Import</div>
							<div class="table-column">Import</div>
						</div>
						${config.meters.map(d => html`
							<div class="table-row">
								<div class="table-column">${d.name}</div>
								<div class="table-column">${round(state.data[d.device].voltage, 2)} V</div>
								<div class="table-column">${round(state.data[d.device].power, 2)} W</div>
								<div class="table-column">${round(state.data[d.device].cosphi, 2)}</div>
								<div class="table-column">${round(state.data[d.device].frequency, 2)}</div>
								<div class="table-column">${round(state.data[d.device].import, 2)} kWh</div>
								<div class="table-column">${round(this.getImport(d), 2)} kWh</div>
							</div>
						`)}
						<div class="table-row">
							<div class="table-column">Total</div>
							<div class="table-column">-</div>
							<div class="table-column">${round(sum.power, 2)} W</div>
							<div class="table-column">-</div>
							<div class="table-column">-</div>
							<div class="table-column">${round(sum.import, 2)} kWh</div>
							<div class="table-column">${round(sum.totalImport, 2)} kWh</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: row;
			}
			.table-row {
				display: flex;
				flex-direction: column;
				width: 100%;
			}
			.table-column {
				padding: 1em;
				height: 1em;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.table-column {
				background-color: #ddd;
			}
			.table-column: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-power-meter-live", PowerMeterLive);