"use strict";

import { LitElement, html, css } from "lit-element";

import "@authentic/mwc-ripple";
import "./card.js";
import "./row.js";

const sw = navigator.serviceWorker;
let registration;
if (sw) {
	sw.register('sw.js', {
		scope: './'
	}).then((reg) => {
		registration = reg;
	});
}

class Settings extends LitElement {
	_forceUpdate(evt) {
		registration.update();
		location.reload();
	}

	render() {
		return html`
			<smarthome-card>
				<a href="https://www.gnu.org/licenses/agpl-3.0-standalone.html">
					<smarthome-row>
						<span slot="left">License</span>
						<mwc-ripple slot="center"></mwc-ripple>
					</smarthome-row>
				</a>
				<a href="https://git.pbb.lc/petabyteboy/smarthome-pwa/">
					<smarthome-row>
						<span slot="left">Source Code</span>
						<mwc-ripple slot="center"></mwc-ripple>
					</smarthome-row>
				</a>
				<smarthome-row @click="${this._forceUpdate}">
					<span slot="left">Force update</span>
					<mwc-ripple slot="center"></mwc-ripple>
				</smarthome-row>
			</smarthome-card>
		`;
	}

	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;
				user-select: none;
			}
			a {
				text-decoration: none;
				color: black;
			}
		`;
	}
}

customElements.define("smarthome-settings", Settings);