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

class TfThemePickerElement extends LitElement {
	static get properties() {
		return {
			selected: {type: String},
			themes: {type: Array},
		};
	}

	constructor() {
		super();
		this.load();
	}

	async load() {
		this.themes = await tfrpc.rpc.getThemes();
		this.selected = await tfrpc.rpc.getTheme();

		let select = this.renderRoot?.querySelector('#theme-select');
		select.value = this.selected;
	}

	changed(event) {
		this.selected = event.srcElement.value;
		console.log('selected theme', this.selected);
		// TODO
	}

	render() {
		return html`
			<link rel="stylesheet" href="/static/tildefriends-v1.css" />

			<label for="theme">[Not implemented] Choose your theme:</label>

			<select
				name="theme"
				id="theme-select"
				?hidden=${!this.themes?.length}
				@change=${this.changed}
			>
				${(this.themes ?? []).map(
					(name) => html`<option value=${name}>${name}</option>`
				)}
			</select>
		`;
	}
}

customElements.define('tf-theme-picker', TfThemePickerElement);