import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';

class TfPasswordFormElement extends LitElement {
	static get properties() {
		return {
			//selected: {type: String},
		};
	}

	constructor() {
		super();
	}

	/**
	 * Checks a password against different requirements
	 * @param {string} password the password to validate
	 * @returns
	 */
	validatePassword(password) {
		// TODO(tasiaiso)
		return true;
	}

	submitPassword() {
		const currentPwd = this.shadowRoot.getElementById('current').value;
		const newPwd = this.shadowRoot.getElementById('new').value;
		const repeatPwd = this.shadowRoot.getElementById('Repeat').value;

		if (!(newPwd === repeatPwd)) {
			return;
		}

		// TODO
		// tfrpc.changePassword()
	}

	render() {
		return html`
			<link rel="stylesheet" href="/static/tildefriends-v1.css" />

			<style>
				.grid {
					display: grid;
					grid-template-columns: auto auto;
				}
			</style>

			<div class="grid">
				<label for="current">Current password:</label>
				<input
					type="password"
					id="current"
					name="current"
					autocomplete="current-password"
				/>

				<label for="new">Enter new password:</label>
				<input
					type="password"
					id="new"
					name="new"
					autocomplete="new-password"
				/>

				<label for="repeat">Repeat new password:</label>
				<input
					type="password"
					id="repeat"
					name="repeat"
					autocomplete="new-password"
				/>
			</div>

			<button @click=${this.submitPassword} class="red">
				[Not implemented] Change my password
			</button>
		`;
	}
}

customElements.define('tf-password-form', TfPasswordFormElement);