"use strict";

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

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

const formatName = (type, name) => {
	if (type == "day") {
		const date = new Date(`${name.substr(0, 4)}-${name.substr(4, 2)}-${name.substr(6, 2)}`);
		return `${weekdays[date.getDay()]} ${date.getDate()}th`;
	} else if (type == "week") {
		let res = "";
		const date = new Date(name.substr(0, 4), 0, 1 + 7 * (Number(name.substr(4, 2)) - 1));
		date.setDate(date.getDate() + 1 - date.getDay());
		res += `${date.getDate()}.${date.getMonth()+1}.`;
		date.setDate(date.getDate() + 7 - date.getDay());
		res += ` - ${date.getDate()}.${date.getMonth()+1}.`;
		return res;
	} else if (type == "month") {
		const date = new Date(`${name.substr(0, 4)}-${name.substr(4, 2)}-01`);
		return months[date.getMonth()];
	}
};

class TemperatureHistory extends LitElement {
	constructor() {
		super(...arguments);
		this.type = "day";
		const now = new Date();
		this.year = now.getFullYear();
		this.month = pad(now.getMonth() + 1, 2);
		this.data = {};

		state.subscribe(this.requestUpdate.bind(this));
		archive.subscribe(this.requestUpdate.bind(this));
	}

	handleSelected(field) {
		return (evt) => {
			this[field] = evt.detail.item.value;
			this.requestUpdate();
		};
	}

	render() {
		const config = state.config.views.filter(view => view.url == this.viewid)[0];
		const now = new Date();

		this.data = {};
		this.sel = this.year;
		if (this.type === "day") this.sel += "_" + this.month;

		archive.load("metadata");
		const years = get(archive.data, [ "metadata", "availableData" ], {});
		const months = get(archive.data, [ "metadata", "availableData", this.year ], []);

		for (let d of config.meters) {
			archive.load(`${this.type}/${d.device}_${this.sel}`);
			const data = get(archive.data, [ `${this.type}/${d.device}_${this.sel}` ], {});
			for (let day of Object.keys(data)) {
				if (!this.data[day]) this.data[day] = {};
				this.data[day][d.device] = data[day].imported;
			}
		}

		return html`
			<div id="selection" class="${Object.keys(years).length > 0 ? "" : "hidden"}">
				<mwc-select label="Type">
					<mwc-menu slot="menu" class="type-sel" @MDCMenu:selected=${this.handleSelected("type")}>
						<mwc-list>
							<mwc-list-item value="day">Days</mwc-list-item>
							<mwc-list-item value="week">Weeks</mwc-list-item>
							<mwc-list-item value="month">Months</mwc-list-item>
						</mwc-list>
					</mwc-menu>
				</mwc-select>
				<mwc-select label="Year">
					<mwc-menu slot="menu" class="year-sel" @MDCMenu:selected=${this.handleSelected("year")}>
						<mwc-list>
							${Object.keys(years).map(m => html`<mwc-list-item value="${m}">${m}</mwc-list-item>`)}
						</mwc-list>
					</mwc-menu>
				</mwc-select>
				<mwc-select label="Month" class="${this.type == "day" ? "" : "hidden"}">
					<mwc-menu slot="menu" class="month-sel" @MDCMenu:selected=${this.handleSelected("month")}>
						<mwc-list>
							${months.map(m => html`<mwc-list-item value="${m}">${Number(m)}</mwc-list-item>`)}
						</mwc-list>
					</mwc-menu>
				</mwc-select>
			</div>
			${archive.finishedLoading() ? html`
				<smarthome-card>
					<div class="table">
						<div class="table-row table-head">
							<div class="table-column">Name</div>
							${Object.keys(this.data).reverse().map((day) => html`
								<div class="table-column">${formatName(this.type, day)}</table-column>
							`)}
						</div>
						${config.meters.map(d => html`
							<div class="table-row">
								<div class="table-column">${d.name}</div>
								${Object.entries(this.data).reverse().map(([day, data]) => html`
									<div class="table-column">${data[d.device] ? round(data[d.device], 2) + " kWh" : "-"}</div>
								`)}
							</div>
						`)}
					</div>
				</smarthome-card>
			` : html`
				<smarthome-spinner>Loading...</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;
			}
			.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;
			}

			.hidden {
				display: none;
			}
			#selection {
				justify-content: center;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				width: 450px;
				max-width: 100%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				margin-bottom: 0px;
				/*justify-content: space-between;*/
			}
			mwc-select {
				width: 100px;
				margin-right: 10px;
				margin-left: 10px;
			}
			@media (min-width: 600px) {
				#selection {
					margin-bottom: -20px;
				}
			}
		`;
	}

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

customElements.define("smarthome-temperature-history", TemperatureHistory);