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 || [];
		});
	}

	_emit_change() {
		let changed_event = new Event('change', {
			srcElement: this,
		});
		this.dispatchEvent(changed_event);
	}

	changed(event) {
		this.selected = event.srcElement.value;
		tfrpc.rpc.localStorageSet('whoami', this.selected);
		this._emit_change();
	}

	render() {
		return html`
			<h2>Broadcasts</h2>
			<ul>
				${this.broadcasts.map(x => html`<li><tf-user id=${x.pubkey} .users=${this.users}></tf-user></li>`)}
			</ul>
			<h2>Connections</h2>
			<ul>
				${this.connections.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></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);