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

class TfTabSearchElement extends LitElement {
	static get properties() {
		return {
			whoami: {type: String},
			users: {type: Object},
			following: {type: Array},
		}
	}

	static styles = styles;

	constructor() {
		super();
		let self = this;
		this.whoami = null;
		this.users = {};
		this.following = [];
	}

	async search(event) {
		let query = this.renderRoot.getElementById('search').value;
		console.log('Searching...', this.whoami, query);
		let results = await tfrpc.rpc.query(`
				SELECT messages.*
				FROM messages_fts(?)
				JOIN messages ON messages.rowid = messages_fts.rowid
				JOIN json_each(?) AS following ON messages.author = following.value
				ORDER BY timestamp DESC limit 100
			`,
			['"' + query.replace('"', '""') + '"', JSON.stringify(this.following)]);
		console.log('Done.');
		this.renderRoot.getElementById('search').value = '';
		this.renderRoot.getElementById('news').messages = results;
	}

	search_keydown(event) {
		if (event.keyCode == 13) {
			this.search();
		}
	}

	render() {
		return html`
			<input type="text" id="search" @keydown=${this.search_keydown}></input>
			<input type="button" value="Search" @click=${this.search}></input>
			<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users}></tf-news>
		`;
	}
}

customElements.define('tf-tab-search', TfTabSearchElement);