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

class TfAppIconElement extends LitElement {
	static get properties() {
		return {
			app: {type: Object},
			user: {type: String},
			whoami: {type: String},
			index: {type: String},
		};
	}

	href() {
		if (this.app.package_owner && this.app.package_name) {
			return `/~${encodeURIComponent(this.app.package_owner)}/${encodeURIComponent(this.app.package_name)}/`;
		} else if (this.app.message_id) {
			return `/${encodeURIComponent(this.app.message_id)}/`;
		} else {
			return `/${encodeURIComponent(this.app.blob_id)}/`;
		}
	}

	on_hold() {
		let context_menu = document.getElementById('context_menu');
		context_menu.app = this.app;
		context_menu.user = this.user;
		context_menu.whoami = this.whoami;
		this._hold = undefined;
	}

	on_context_menu(event) {
		event.preventDefault();
		this.on_hold();
	}

	start_hold(event) {
		if (event.pointerType === 'mouse') {
			event.preventDefault();
		}
		if (!this._hold) {
			this._hold = setTimeout(this.on_hold.bind(this), 500);
		}
	}

	move_hold(event) {
		if (event.pointerType === 'mouse') {
			event.preventDefault();
		}
		let element = this.shadowRoot.elementFromPoint(
			event.clientX,
			event.clientY
		);
		while (element) {
			if (
				element == this ||
				element == this.shadowRoot ||
				element == this.renderRoot
			) {
				return;
			}
			element = element.parentNode;
		}
		this.cancel_hold();
	}

	cancel_hold() {
		if (this._hold) {
			clearTimeout(this._hold);
			this._hold = undefined;
		}
	}

	render_app_name() {
		if (this.app.author_name) {
			return html` <div style="max-width: 100%; word-break: break-all">
				${this.app.package_name}
				<span
					class="w3-tag w3-round w3-blue w3-small"
					style="padding: 4px; max-width: 100%; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis ellipsis"
				>
					${this.app.author_name}
				</span>
			</div>`;
		} else {
			return html`<div style="word-break: break-all">
				${this.app.package_name}
			</div>`;
		}
	}

	async render_progress() {
		let result = await Promise.all(
			Object.values(this.app?.files ?? []).map((x) => tfrpc.rpc.blobHas(x))
		);
		let have = result.reduce((a, c) => a + c, 0);
		if (have != result.length) {
			return html`
				<progress value=${have} max=${result.length}></progres>
			`;
		}
	}

	render() {
		return html`
			<link type="text/css" rel="stylesheet" href="w3.css" />
			<style>
				.app {
					width: 0.9in;
					max-width: 1in;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					white-space: wrap;
				}
			</style>
			<a
				class="app w3-center w3-button w3-display-container"
				style="padding: 2px; border-radius: 16px"
				href=${this.href()}
				@pointerdown=${this.start_hold}
				@pointerup=${this.cancel_hold}
				@pointerleave=${this.cancel_hold}
				@pointermove=${this.move_hold}
				@contextmenu=${this.on_context_menu}
			>
				<div style="font-size: xxx-large" class="w3-display-container">
					${this.app.emoji ?? '📦'}
					${this.app.shared && !this.app.tombstone
						? html`<span class="w3-display-topright w3-xlarge">🏷️</span>`
						: undefined}
					${this.app.modified
						? html`<span class="w3-display-topleft w3-xlarge">📝</span>`
						: undefined}
					${this.app.installed
						? html`<span class="w3-display-bottomleft w3-xlarge">🌐</span>`
						: undefined}
					${this.href() === this.index
						? html`<span class="w3-display-bottomright w3-xlarge">🏠</span>`
						: undefined}
				</div>
				${this.render_app_name()} ${until(this.render_progress())}
			</a>
		`;
	}
}

customElements.define('tf-app-icon', TfAppIconElement);
