"use strict";

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

import { Switch } from "@authentic/mwc-switch";
import "@authentic/mwc-circular-progress";
import "@authentic/mwc-ripple";
import "./card.js";
import "./spinner.js";
import { Row } from "./row.js";

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

	_clickHandler(evt) {
		evt.preventDefault();
		const row = evt.composedPath().filter(el => el instanceof Row)[0];
		if (row.attributes.disabled) return;
		const sw = row.querySelector("mwc-switch");
		sw.checked = !sw.checked;
		state.ws.send(JSON.stringify({
			type: "SwitchStateAction",
			deviceName: sw.deviceName,
			relay: sw.relayNum,
			state: sw.checked,
			accessToken: state.accessToken
		}));
		if (evt.clientX !== 0 || evt.clientY !== 0) sw.blur();
		return true;
	}

	render() {
		const config = state.config.views.filter(view => view.url == this.viewid)[0];
		return html`
			<smarthome-card>
				${config.switches.map(sw => html`
					<smarthome-row @click="${this._clickHandler}" ?disabled="${!state.connected}">
						<span slot="left">${sw.name}</span>
						<mwc-ripple slot="center"></mwc-ripple>
						${state.data[sw.device].type == "RelayBoard" ? html`<mwc-switch slot="right" .deviceName="${sw.device}" .relayNum="${sw.relay}" ?disabled="${!state.connected}" ?checked="${state.data[sw.device].relays[sw.relay]}"></mwc-switch>` : html``}
						${state.data[sw.device].type == "Zigbee2MqttLamp" ? html`<mwc-switch slot="right" .deviceName="${sw.device}" ?disabled="${!state.connected}" ?checked="${state.data[sw.device].lampState}"></mwc-switch>` : html``}
						${state.data[sw.device].type == "Zigbee2MqttRelay" ? html`<mwc-switch slot="right" .deviceName="${sw.device}" ?disabled="${!state.connected}" ?checked="${state.data[sw.device].relayState}"></mwc-switch>` : html``}
					</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;
			}
			smarthome-row[disabled] {
				color: #999;
			}
			smarthome-row[disabled] mwc-ripple {
				display: none;
			}
		`;
	}

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

customElements.define("smarthome-switches", Switches);