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

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

	static styles = styles;

	constructor() {
		super();
		let self = this;
		this.whoami = null;
		this.users = {};
		this.hash = '#';
		this.unread = [];
		this.following = [];
		this.cache = {};
	}

	async fetch_messages() {
		if (this.hash.startsWith('#@')) {
			return await tfrpc.rpc.query(
				`
					SELECT messages.*
					FROM messages
					WHERE messages.author = ?
					ORDER BY sequence DESC
					LIMIT 20
				`,
				[
					this.hash.substring(1),
				]);
		} else if (this.hash.startsWith('#%')) {
			return await tfrpc.rpc.query(
				`
					SELECT messages.*
					FROM messages
					WHERE id = ?
				`,
				[
					this.hash.substring(1),
				]);
		} else {
			return await tfrpc.rpc.query(
				`
					SELECT messages.*
					FROM messages
					JOIN json_each(?) AS following ON messages.author = following.value
					WHERE messages.timestamp > ?
					ORDER BY messages.timestamp DESC
				`,
				[
					JSON.stringify(this.following),
					new Date().valueOf() - 24 * 60 * 60 * 1000,
				]);
		}
	}

	async show_more() {
		let unread = this.unread;
		this.unread = [];
		this.process_messages(unread);
		await this.finalize_messages();
	}

	async render_news() {
		if (this.cache.hash !== this.hash ||
			this.cache.whoami !== this.whoami ||
			this.cache.users !== this.users ||
			!this.cache.messages) {
			this.cache = {
				hash: this.hash,
				whoami: this.whoami,
				users: this.users,
				messages: this.fetch_messages(),
			};
		}
		let messages = await this.cache.messages;
		return html`<tf-news whoami=${this.whoami} .users=${this.users} .messages=${messages}></tf-news>`;
	}

	render() {
		let profile = this.hash.startsWith('#@') ?
			html`<tf-profile id=${this.hash.substring(1)} whoami=${this.whoami} .users=${this.users}></tf-profile>` : undefined;
		return html`
			<div><input type="button" value=${'Show ' + this.unread.length + ' New Messages'} @click=${this.show_more}></input></div>
			<button id="load_button" @click=${this.load}>Load</button>
			<a target="_top" href="#" ?hidden=${this.hash.length <= 1}>🏠Home</a>
			<div>Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!</div>
			<div><tf-compose whoami=${this.whoami} .users=${this.users}></tf-compose></div>
			${profile}
			${until(this.render_news(), html`<div>Loading...</div>`)}
		`;
	}
}

customElements.define('tf-tab-news', TfTabNewsElement);