"use strict";

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

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

const round = (num, places) => {
	const factor = Math.pow(10, places);
	return Math.round(num * factor) / factor;
};

const pad = (string, amount) => Array(amount).join('0').substr(0, amount - String(string).length) + string;

class Departures extends LitElement {
	constructor() {
		super(...arguments);

		this.loadData();
		setInterval(this.loadData.bind(this), 10000);
	}
	
	loadData() {
		fetch('/departures?stations=1505,2946,2187')
			.then(resp => resp.json())
			.then(data => {
				this.data = data;
				this.requestUpdate();
			});
	}

	render() {
		return html`
			${this.data ? html`
				${Object.entries(this.data).map(([name, d]) => html`
					<smarthome-card>
						<div class="table-column table-title">${name}</div>
						<div class="table">
							<div class="table-row line-column">
								<div class="table-column table-heading">Linie</div>
								${d.map((departure) => html`
									<div class="table-column">${departure.line}</div>
								`)}
							</div>
							<div class="table-row direction-column">
								<div class="table-column table-heading">Richtung</div>
								${d.map((departure) => html`
									<div class="table-column">${departure.direction}</div>
								`)}
							</div>
							<div class="table-row dep-column">
								<div class="table-column table-heading">Abfahrt</div>
								${d.map((departure) => html`
									<div class="table-column">${Number(departure.departure_in) ? departure.departure_in + " min" : "sofort"}</div>
								`)}
							</div>
							${d.length ? "" : html`
								<div class="table-empty table-column">--- Momentan keine Abfahrten ---</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: .5em;
				height: 1em;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.table-column {
				background-color: #ddd;
			}
			.line-column {
				width: 20%;
			}
			.direction-column {
				width: 60%;
			}
			.dep-column {
				width: 20%;
			}
			.table {
				flex-wrap: wrap;
				padding: 20px;
				padding-top: 10px;
				background: #444;
			}
			.table-column {
				background: #444;
				color: white;
			}

			.table-column:not(.table-heading):not(.table-title) {
				font-family: monospace;
				font-size: 15px;
				background: #222;
				border-bottom: 1px solid grey;
				color: #ffaa00;
			}

			.table-title {
				padding: .85em;
				padding-bottom: 0;
				font-size: 1.4em;
			}

			.table-heading {
				border-left: 2px solid white;
			}

			.table-empty {
				flex-basis: 100%;
				text-align: center;
			}
		`;
	}
}

customElements.define("smarthome-departures", Departures);