"use strict";

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

import "@authentic/mwc-icon";

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

const formatDate = (date) => (
	'' +
	date.getFullYear() +
	'/' +
	pad(date.getMonth() + 1, 2) +
	'/' +
	pad(date.getDate(), 2) +
	' ' +
	date.getHours() +
	':' +
	pad(date.getMinutes(), 2)
);

class ConnectionStatus extends LitElement {
	constructor() {
		super(...arguments);
		state.subscribe(this.requestUpdate.bind(this));
	}

	render() {
		return html`
			${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>
			`}
		`;
	}

	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;
				justify-content: center;
				align-items: center;
			}
			mwc-icon {
				padding-right: .5em;
			}
			p {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			p.lastupdate {
				font-size: 1em;
			}
		`;
	}
}

customElements.define("smarthome-connection-status", ConnectionStatus);