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

/*
 * Provide a list of IDs, and this lets the user pick one.
 */
class TfIdentityPickerElement extends LitElement {
	static get properties() {
		return {
			ids: {type: Array},
			selected: {type: String},
			users: {type: Object},
		};
	}

	static styles = styles;

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

	changed(event) {
		this.selected = event.srcElement.value;
		this.dispatchEvent(
			new Event('change', {
				srcElement: this,
			})
		);
	}

	render() {
		return html`
			<select
				class="w3-select w3-dark-grey w3-padding w3-border"
				@change=${this.changed}
				style="max-width: 100%; overflow: hidden"
			>
				${(this.ids ?? []).map(
					(id) =>
						html`<option ?selected=${id == this.selected} value=${id}>
							${this.users[id]?.name
								? this.users[id]?.name + ' - '
								: undefined}<small>${id}</small>
						</option>`
				)}
			</select>
		`;
	}
}

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