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},
			drafts: {type: Object},
			expanded: {type: Object},
			import_progress: {type: Object},
		};
	}

	static styles = styles;

	constructor() {
		super();
		let self = this;
		this.whoami = null;
		this.users = {};
		this.hash = '#';
		this.unread = [];
		this.following = [];
		this.cache = {};
		this.drafts = {};
		this.expanded = {};
		this.import_progress = null;
		tfrpc.rpc.localStorageGet('drafts').then(function(d) {
			self.drafts = JSON.parse(d || '{}');
		});
	}

	connectedCallback() {
		super.connectedCallback();
		document.body.addEventListener('keypress', this.on_keypress.bind(this));
	}

	disconnectedCallback() {
		super.disconnectedCallback();
		document.body.removeEventListener('keypress', this.on_keypress.bind(this));
	}

	show_more() {
		let unread = this.unread;
		let news = this.shadowRoot?.getElementById('news');
		if (news) {
			console.log('injecting messages', news.messages);
			news.messages = Object.values(Object.fromEntries([...this.unread, ...news.messages].map(x => [x.id, x])));
			this.dispatchEvent(new CustomEvent('refresh'));
		}
	}

	new_messages_text() {
		if (!this.unread?.length) {
			return 'No new messages.';
		}
		let counts = {};
		for (let message of this.unread) {
			let type = 'private';
			try {
				type = JSON.parse(message.content).type || type;
			} catch {
			}
			counts[type] = (counts[type] || 0) + 1;
		}
		return 'Show New: ' + Object.keys(counts).sort().map(x => (counts[x].toString() + ' ' + x + 's')).join(', ');
	}

	draft(event) {
		let id = event.detail.id || '';
		let previous = this.drafts[id];
		if (event.detail.draft !== undefined) {
			this.drafts[id] = event.detail.draft;
		} else {
			delete this.drafts[id];
		}
		/* Only trigger a re-render if we're creating a new draft or discarding an old one. */
		if ((previous !== undefined) != (event.detail.draft !== undefined)) {
			this.drafts = Object.assign({}, this.drafts);
		}
		tfrpc.rpc.localStorageSet('drafts', JSON.stringify(this.drafts));
	}

	on_expand(event) {
		if (event.detail.expanded) {
			let expand = {};
			expand[event.detail.id] = true;
			this.expanded = Object.assign({}, this.expanded, expand);
		} else {
			delete this.expanded[event.detail.id];
			this.expanded = Object.assign({}, this.expanded);
		}
	}

	on_keypress(event) {
		if (event.target === document.body &&
			event.key == '.') {
			this.show_more();
		}
	}

	import_data() {
		let self = this;
		let input = document.createElement('input');
		input.type = 'file';
		input.onchange = async function(event) {
			self.import_progress = {name: 'loading'};
			let zip = new JSZip();
			let file = await zip.loadAsync(event.target.files[0]);
			let progress = 0;
			let messages = JSON.parse(await file.file('messages.txt').async('string'));
			for (let message of messages) {
				self.import_progress = {name: 'messages', value: progress++, max: messages.length};
				await tfrpc.rpc.store_message(message);
			}
			let blobs = [];
			file.forEach(function(path, entry) {
				if (path != 'messages.txt' && !entry.dir) {
					blobs.push(entry);
				}
			});
			progress = 0;
			for (let blob of blobs) {
				self.import_progress = {name: 'blobs', value: progress++, max: blobs.length};
				console.log(await tfrpc.rpc.store_blob(await blob.async('arraybuffer')));
			}
			self.import_progress = undefined;
		};
		input.click();
	}

	render() {
		let profile = this.hash.startsWith('#@') ?
			html`<tf-profile id=${this.hash.substring(1)} whoami=${this.whoami} .users=${this.users}></tf-profile>` : undefined;
		let import_state = html`<input type="button" value="Import" @click=${this.import_data}></input>`;
		if (this.import_progress) {
			if (this.import_progress.max) {
				import_state = html`${this.import_progress.name} <progress value=${this.import_progress.value} max=${this.import_progress.max}></progress>`;
			} else {
				import_state = html`${this.import_progress.name} <progress></progress>`;
			}
		}
		return html`
			<div><input type="button" value=${this.new_messages_text()} @click=${this.show_more}></input></div>
			<a target="_top" href="#" ?hidden=${this.hash.length <= 1}>🏠Home</a> ${import_state}
			<div>Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!</div>
			<div><tf-compose whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} @tf-draft=${this.draft}></tf-compose></div>
			${profile}
			<tf-tab-news-feed id="news" whoami=${this.whoami} .users=${this.users} .following=${this.following} hash=${this.hash} .drafts=${this.drafts} .expanded=${this.expanded} @tf-draft=${this.draft} @tf-expand=${this.on_expand}></tf-tab-news-feed>
		`;
	}
}

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