'use strict';

import { showDiv, hideDiv, ElementById, parseDateTime, formatDuration } from './helpers.js';
import { getCache, addCache, parseName, ConsoleLog, t } from './app_functions.js';
import { dataStorage } from './app.js';
import { setupCanvas } from './canvas.js';
import { get } from './api.js';
import { go } from './router.js';
import { html, render } from './lit-html.js';
import { showAlertModal } from './overlays.js';

let data;

const journeysTemplate = (data) => html`
	<div id="journeysView">
		<div id="header">
			<a class="back" href="#/"></a>
			<p><h3>${t('from')}: <span id="fromName">${parseName(data.params.fromPoint)}</span></h3></p>
			<p><h3>${t('to')}: <span id="toName">${parseName(data.params.toPoint)}</span></h3></p>
			<!-- <div class="reload" id="reload-journeys" @click=${() => reloadJourneys(data.reqId)}></div> -->
		</div>

		${dataStorage.settings.enableCanvas ? html`
			<div id="journeysCanvas">
				<canvas id="canvas"></canvas>
			</div>
		` : html`
			<div id="journeysTable">
				<div class="loadMore flipped" @click=${() => moreJourneys(data.reqId, 'earlier')}></div>

				<table>
					<thead>
						<tr><th>${t('departure')}</th><th>${t('arrival')}</th><th>${t('duration')}</th><th>${t('changes')}</th><th>${t('products')}</th></tr>
					</thead>
					<tbody id="connectionsTable">
					${Object.keys(data.journeys).sort((a, b) => a - b).map(key => journeyOverviewTemplate(data, key))}
					</tbody>
				</table>

				<div class="loadMore" @click=${() => moreJourneys(data.reqId, "later")}></div>
			</div>
		`}
	</div>
`;

const journeyOverviewTemplate = (data, key) => {
	let departure       = data.journeys[key].legs[0].departure;
	let arrival         = data.journeys[key].legs[data.journeys[key].legs.length - 1].arrival;
	let changes         = 0;
	let products        = [];
	let changesDuration = 0;
	let cancelled       = false;

	let departureTime = departure.prognosedTime ? departure.prognosedTime : departure.plannedTime;
	let arrivalTime   = arrival.prognosedTime   ? arrival.prognosedTime   : arrival.plannedTime;
	let duration      = arrivalTime - departureTime;

	for (let legKey in data.journeys[key].legs) {
		let leg = data.journeys[key].legs[legKey];
		if (leg.cancelled !== false) cancelled = true;
		if (leg.isWalking || leg.isTransfer) continue;

		changes = changes+1;
		products.push(leg.line.productName);
	}

	products = [...new Set(products)];

	return html`
	<tr class="connection ${cancelled ? 'cancelled' : ''}" @click=${() => go('/'+data.reqId + '/' + key)}">
		<td>${timeTemplate(departure, 'departure')}</td>
		<td>${timeTemplate(arrival, 'arrival')}</td>
		<td title="${changesDuration > 0 ? 'Davon '+formatDuration(changesDuration)+' Umstiegsdauer' : ''}">${formatDuration(duration)}</td>
		<td>${changes-1}</td>
		<td>${products.join(', ')}</td>
	</tr>`;
}

export const journeysView = async (match) => {
	const reqId = match[0];

	data = getCache('journeys', reqId);

	if (!data) {
		data = await get("/journeys", {"reqId": reqId});
		addCache('journeys', data);
	}

	render(journeysTemplate(data), ElementById('content'))

	if (dataStorage.settings.enableCanvas) {
		setupCanvas(data);
	}
};

const timeTemplate = (data, mode) => {
	let delay = 0;

	if (data.prognosedTime !== null) {
		delay = (data.prognosedTime - data.plannedTime)/60;
	}

	return html`
	${delay > 0 ? html`
		${parseDateTime(data.prognosedTime)} <b>(+${delay})</b>
	` : html`
		${parseDateTime(data.plannedTime)}
	`}`;
}

export const moreJourneys  = async (reqId, mode) => {
	let   data    = getCache('journeys', reqId);
	const newData = await get('/moreJourneys', {"reqId": reqId, "mode": mode});

	data.lastUpdated = newData.lastUpdated; 
	data.journeys    = {...data.journeys, ...newData.journeys};

	addCache('journeys', data);
	journeysView([reqId]);
};

export const reloadJourneys = async (requestId) => {
	showAlertModal("not implemented yet");
};