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

/*
** Provide a list of IDs, and this lets the user pick one
** and updates local storage remembering the active identity.
*/
class TfIdentityPickerElement extends LitElement {
	static get properties() {
		return {
			ids: {type: Array},
			selected: {type: String},
		}
	}

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

	_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`
			<select @change=${this.changed} style="max-width: 100%">
				${this.ids.map(id => html`<option ?selected=${id == this.selected}>${id}</option>`)}
			</select>
		`;
	}
}

customElements.define('tf-id-picker', TfIdentityPickerElement);