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

class TfAppGroupElement extends LitElement {
	static get properties() {
		return {
			user: {type: String},
			whoami: {type: String},
			apps: {type: Array},
			name: {type: String},
			index: {type: String},
		};
	}

	async render_apps() {
		let apps = await this.apps;
		if (!apps?.length) {
			return html`
				<div class="w3-paper w3-padding" style="border-radius: 0 0 16px 16px">
					<p>None found.</p>
				</div>
			`;
		}
		return html`
			<div
				class="w3-paper w3-grid"
				style="grid-template-columns: repeat(auto-fill, minmax(.9in, 1fr)); place-items: center; border-radius: 0 0 16px 16px"
			>
				${map(
					apps,
					(app) =>
						html`<tf-app-icon
							user=${this.user}
							whoami=${this.whoami}
							index=${this.index}
							.app=${app}
						></tf-app-icon>`
				)}
			</div>
		`;
	}

	render() {
		return html`
			<link type="text/css" rel="stylesheet" href="w3.css" />
			<div
				class="w3-card-4 w3-margin-bottom"
				style="border-radius: 16px 16px 0 0"
			>
				<header
					class="w3-container w3-blue"
					style="border-radius: 16px 16px 0 0"
				>
					<h2>${this.name}</h2>
				</header>
				${until(
					this.render_apps(),
					html`
						<div
							class="w3-paper w3-padding"
							style="border-radius: 0 0 16px 16px"
						>
							<p>Loading...</p>
						</div>
					`
				)}
			</div>
		`;
	}
}

customElements.define('tf-app-group', TfAppGroupElement);
