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

class TfIdentityManagerElement extends LitElement {
	static get properties() {
		return {
			ids: {type: Array},
		};
	}

	constructor() {
		super();
		this.ids = [];
		this.load();
	}

	async load() {
		this.ids = await tfrpc.rpc.getIdentities();
	}

	async createIdentity() {
		try {
			let id = await tfrpc.rpc.createID();
			alert('Successfully created: ' + id);
			await tfrpc.rpc.reload();
		} catch (err) {
			alert('Error creating identity: ' + err);
		}
	}

	async exportIdentity(id) {
		alert('Your private key is:\n' + (await tfrpc.rpc.getPrivateKey(id)));
	}

	render() {
		return html`
			<link rel="stylesheet" href="/static/tildefriends-v1.css"/>
			<style>
				.id-span {
					font-family: monospace;
					margin-left: 8px;
				}
			</style>

			<h4>Create a new identity</h4>
			<button id="create-id" class="green" @click=${this.createIdentity}>Create Identity</button>

			<h4>Import an SSB Identity from 12 BIP39 English Words</h4>
			<textarea id="add-id" style="width: 100%" rows="4"></textarea>
			<button class="green">[Not implemented] Import Identity</button>

			<h4>Warning !</h4>
			<strong>Anybody that has access to your private key can gain total access over your account.</strong>
			<br><br>
			Tilde Friends' contributors will never ask you for your private key !

			<ul>
			${this.ids.map(
				(id) =>
					html`
				<li>
					<button class="blue" @click=${() => this.exportIdentity(id)}>Export Identity</button>
					<button class="red">[Not implemented] Delete Identity</button>
					<span class="id-span">${id}</span>
				</li>`
			)}
			</ul>`;
	}
}

customElements.define('tf-identity-manager', TfIdentityManagerElement);