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 {
			const id = await tfrpc.rpc.createID();
			alert('Successfully created: ' + id);
			await tfrpc.rpc.reload();
		} catch (err) {
			alert('Error creating identity: ' + err);
		}
	}

	async importIdentity() {
		const words = this.renderRoot?.querySelector('#import-id-textarea').value;
		if (!words) return;

		try {
			const newID = await tfrpc.rpc.addID(words);

			if (newID) alert('Successfully imported a new identity');
			else alert('This identity already exists or is invalid.');
			await tfrpc.rpc.reload();
		} catch (err) {
			alert('Error importing identity: ' + err);
		}
	}

	async exportIdentity(id) {
		alert(
			'Your private key is:\n' +
				(await tfrpc.rpc.getPrivateKey(id)) +
				'\nDo not share it with anyone!'
		);
	}

	async deleteIdentity(id) {
		try {
			if (
				prompt(
					'Are you sure you want to delete "' +
						id +
						'"?  It cannot be recovered without the exported phrase.\\n\\nEnter the word "DELETE" to confirm you wish to delete it.'
				) === 'DELETE'
			) {
				if (await tfrpc.rpc.deleteID(id)) {
					alert('Successfully deleted ID: ' + id);
				}
				await tfrpc.rpc.reload();
			}
		} catch (e) {
			alert('Error deleting ID: ' + e);
		}
	}

	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="import-id-textarea" style="width: 100%" rows="4"></textarea>
			<button class="green" @click=${this.importIdentity}>
				Import Identity
			</button>

			<h4>Warning !</h4>
			<strong
				>Anybody that knows 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" @click=${() => this.deleteIdentity(id)}>
								Delete Identity
							</button>
							<span class="id-span">${id}</span>
						</li>`
				)}
			</ul>`;
	}
}

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