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

class TfTabConnectionsElement extends LitElement {
	static get properties() {
		return {
			broadcasts: {type: Array},
			identities: {type: Array},
			connections: {type: Array},
			users: {type: Object},
		}
	}

	constructor() {
		super();
		let self = this;
		this.broadcasts = [];
		this.identities = [];
		this.connections = [];
		this.users = {};
		tfrpc.rpc.getAllIdentities().then(function(identities) {
			self.identities = identities || [];
		});
	}

	render_connection_summary(connection) {
		if (connection.address && connection.port) {
			return html`(<small>${connection.address}:${connection.port}</small>)`;
		} else if (connection.tunnel) {
			return html`(room peer)`;
		} else {
			return JSON.stringify(connection);
		}
	}

	render_room_peers(connection) {
		let self = this;
		let peers = this.broadcasts.filter(x => x.tunnel?.id == connection);
		if (peers.length) {
			return html`
				<ul>
					${peers.map(x => html`${self.render_room_peer(x)}`)}
				</ul>
			`;
		}
	}

	async _tunnel(portal, target) {
		return tfrpc.rpc.createTunnel(portal, target);
	}

	render_room_peer(connection) {
		let self = this;
		return html`
			<li>
				<input type="button" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)} value="Connect"></input>
				<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
			</li>
		`;
	}

	render_broadcast(connection) {
		return html`
			<li>
				<input type="button" @click=${() => tfrpc.rpc.connect(connection)} value="Connect"></input>
				<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
				${this.render_connection_summary(connection)}
			</li>
		`
	}

	render() {
		let self = this;
		return html`
			<h2>New Connection</h2>
			<div style="display: flex; flex-direction: column">
				<textarea id="code"></textarea>
			</div>
			<input type="button" @click=${() => tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)} value="Connect"></input>
			<h2>Broadcasts</h2>
			<ul>
				${this.broadcasts.filter(x => x.address).map(x => self.render_broadcast(x))}
			</ul>
			<h2>Connections</h2>
			<ul>
				${this.connections.map(x => html`
					<li>
						<input type="button" @click=${() => tfrpc.rpc.closeConnection(x)} value="Close"></input>
						<tf-user id=${x} .users=${this.users}></tf-user>
						${self.render_room_peers(x)}
					</li>
				`)}
			</ul>
			<h2>Local Accounts</h2>
			<ul>
				${this.identities.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`)}
			</ul>
		`;
	}
}

customElements.define('tf-tab-connections', TfTabConnectionsElement);