"use strict";

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

class Prompt extends LitElement {
	render() {
		return html`
			<h4>Enter the passphrase:</h4>
			<form @submit=${this.handleSubmit}>
				<smarthome-card>
					<input type="password" id="accessToken">
				</smarthome-card>
				<mwc-icon-button icon="arrow_forward" @click=${this.handleSubmit}></mwc-icon-button>
			</form>
		`;
	}

	handleSubmit(evt) {
		evt.preventDefault();
		state.setAccessToken(this.shadowRoot.getElementById("accessToken").value);
		return true;
	}

	static get styles() {
		return css`
			:host {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			input {
				padding: 0;
				border: none;
				height: 3em;
				color: black;
			}
			smarthome-card {
				display: flex;
				margin: 0;
				margin-right: 20px;
			}
			form {
				display: flex;
				flex-direction: row;
			}
		`;
	}
}

customElements.define("smarthome-prompt", Prompt);