import { html, nothing } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { when } from 'lit/directives/when.js';
import { BaseView } from './baseView.js';

import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
import { platformTemplate, timeTemplate } from './templates.js';
import { processLeg } from './app_functions.js';
import { getHafasClient } from './hafasClient.js';
import { t } from './translate.js';

import { headerStyles, tableStyles, departuresViewStyles } from './styles.js';

class DeparturesView extends BaseView {
	static styles = [
		super.styles,
		headerStyles,
		tableStyles,
		departuresViewStyles
	];

	static properties = {
		profile:    { attribute: true },
		stopId:     { attribute: true },
		when:       { attribute: true, type: Number },
		viewState:  { state: true },
	};

	constructor () {
		super();

		this.viewState  = null;
	}

	async connectedCallback () {
		super.connectedCallback();
		await sleep(200);
		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
	}

	disconnectedCallback () {
		super.disconnectedCallback();

		this.viewState = null;
	}

	async willUpdate (previous) {
		if (previous.has('stopId')) this.viewState = null;

		if (!this.viewState && !this.overlayState.visible) await this.updateViewState();
	}

	updated (previous) {
		super.updated(previous, 'DeparturesView');

		if (isDevServer && previous.has('viewState')) console.info('DeparturesView(viewState):', this.viewState);
	}

	updateViewState = async () => {
		if (this.isOffline !== false) return;

		this.isUpdating = true;
		try {
			const when   = this.when;
			const client = await getHafasClient(this.profile);

			const [ { departures }, stopInfo ] = await Promise.all([
				client.departures(this.stopId, { when }),
				client.stop(this.stopId),
			]);

			departures.forEach(departure => processLeg(departure));

			this.viewState = {
				...stopInfo,
				departures
			};
		} catch(e) {
			this.showAlertOverlay(
				e.toString(),
				() => {
					window.location = '#/';
				}
			);
			console.error(e);
		}
		this.isUpdating = false;
	}

	renderView = () => [
		html`
			<div class="header-container">
				<header>
					<a class="icon-back ${classMap({ invisible: history.length === 1 })}" title=${t('back')} @click=${() => history.back()}></a>
					<div class="container">
						${when(
							this.viewState,
							() => html`<a class="icon-bahnexpert" href="https://bahn.expert/${encodeURIComponent(this.viewState.name)}"></a>`
						)}
						<h3>Departures from ${when(!this.viewState, () => '...', () => this.viewState.name)}</h3>
					</div>
					<a class="icon-reload ${classMap({ spinning: this.isUpdating, invisible: this.isOffline })}" title=${t("refresh")} @click=${this.updateViewState}></a>
				</header>
			</div>
		`,

		when(!this.viewState,
			() => when(
				!this.isOffline,
				() => html`<div class="spinner"></div>`,
				() => html`<div class="offline"></div>`
			),
			() => html`
				<div class="container">
					<div class="table" style="grid-template-columns: 1fr .5fr 3.5fr 1fr">
						<div class="row head">
							<span>Time</span>
							<span></span>
							<span></span>
							<span>${t('platform')}</span>
						</div>
						${(this.viewState.departures || []).map(departure => html`
							<a class="row" href="#/t/${this.profile}/${departure.tripId}">
								<span class=${classMap({ cancelled: departure.cancelled })}>
									${timeTemplate(departure)}
								</span>
								<span class="direction ${classMap({ cancelled: departure.cancelled })}">
									${departure.line.name}
								</span>
								<span class="direction ${classMap({ cancelled: departure.cancelled })}">
									${when(
										departure.direction, 
										() => html` → ${departure.direction}`
									)}
								</span>
								${when(
									!departure.cancelled,
									() => html`<span>${platformTemplate(departure)}</span>`,
									() => html`<span class="cancelled-text">${t('cancelled')}</span>`
								)}
							</a>
						`)}
						</tbody>
					</div>
				</div>
				<footer-component></footer-component>
			`
		)
	];

}

customElements.define('departures-view', DeparturesView);