import { html, nothing, render } from 'lit-html';
import { settings } from './settings.js';
import { platformTemplate, timeTemplate } from './templates.js';
import { ElementById, setThemeColor, queryBackgroundColor } from './helpers.js';
import { processLeg } from './app_functions.js';
import { formatDateTime, formatDuration, formatPrice } from './formatters.js';
import { showAlertModal, showLoader, hideOverlay, showModal } from './overlays.js';
import { go } from './router.js';
import { getHafasClient, client } from './hafasClient.js';
import { t } from './languages.js';

const departuresTemplate = (data, profile, stopId, when) => {
	let changes = 0;
	let lastArrival;

	return html`
		<div class="header-container">
			<header>
				<a id="back" class="icon-back invisible" title="${t('back')}" @click=${() => history.back()}></a>
				<div class="container">
					<h3>Departures from ${data.name}</h3>
				</div>
				<a id="reload" class="icon-reload" title="${t("reload")}" @click=${() => refreshDeparturesView(profile, stopId, when)}></a>
			</header>
		</div>
		<div class="container departuresView">
			<div class="card">
			<table>
				<thead>
					<tr>
						<th>Time</th>
						<th class="station"></th>
						<th>${t('platform')}</th>
					</tr>
				</thead>
				<tbody>
					${(data.departures || []).map(departure => html`
						<tr @click=${() => go(`/t/${profile}/${departure.tripId}`)}>
							<td class="${departure.cancelled ? 'cancelled' : nothing}"><span>${timeTemplate(departure)}</span></td>
							<td class="${departure.cancelled ? 'cancelled' : nothing}"><span>${departure.line.name}${departure.direction ? html` → ${departure.direction}` : nothing}</span></td>
							${departure.cancelled ? html`
								<td><span class="cancelled-text">${t('cancelled-ride')}</span></td>
							` : html`
								<td>${platformTemplate(departure)}</td>
							`}
						</tr>
					`)}
				</tbody>
			</table>
			</div>
		</div>
	`;
};

export const departuresView = async (match, isUpdate) => {
	if (!isUpdate) showLoader();

	let profile, stopId, when, data;

	try {
		profile = match[0];
		stopId  = match[1];

		if (match[2]) when = new Date(parseInt(match[2].substring(1)));

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

		for (let departure of departures) {
			processLeg(departure);
		};

		data = { ...stopInfo, departures };
	} catch(e) {
		showAlertModal(e.toString());
		throw e;
	}

	hideOverlay();

	render(departuresTemplate(data, profile, stopId, when), ElementById('content'));
	setThemeColor(queryBackgroundColor('header'));

	if (history.length > 0) ElementById('back').classList.remove('invisible');
};

const refreshDeparturesView = async (profile, stopId, when) => {
	document.querySelector('.icon-reload').classList.add('spinning');

	let data;

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

		for (let departure of departures) {
			processLeg(departure);
		};

		data = { ...stopInfo, departures };
	} catch(e) {
		showAlertModal(e.toString());
		throw e;
	}

	render(departuresTemplate(data, profile, stopId, when), ElementById('content'));
	document.querySelector('.icon-reload').classList.remove('spinning');
};