import { html, nothing, render } from 'lit-html';
import { ElementById, setThemeColor, queryBackgroundColor, padZeros } from './helpers.js';
import { getJourneys, getMoreJourneys, refreshJourneys, getFrom, getTo } from './app_functions.js';
import { formatName, formatDuration, formatFromTo, formatPrice } from './formatters.js';
import { timeTemplate, footerTemplate } from './templates.js';
import { settings, modifySettings } from './settings.js';
import { setupCanvas } from './journeysViewCanvas.js';
import { go } from './router.js';
import { showAlertModal, showLoader, hideOverlay } from './overlays.js';
import { t } from './languages.js';

const journeysTemplate = (data) => html`
	<div class="header-container">
		<header id="header">
			<a class="icon-back" href="#/" title="${t('back')}"></a>
			<div class="container flex-row">
				<div>
					<h3>${t('from')}: ${formatName(getFrom(data.journeys))}</h3>
					<h3>${t('to')}: ${formatName(getTo(data.journeys))}</h3>
				</div>
				<div class="mode-changers flex-row">
					<a href="#/${data.slug}/table" class="${settings.journeysViewMode === 'table' ? 'active' : ''}">
						<div class="icon-table"></div>
						<span>${t('table-view')}</span>
					</a>
					<a href="#/${data.slug}/canvas" class="${settings.journeysViewMode === 'canvas' ? 'active' : ''}">
						<div class="icon-canvas"></div>
						<span>${t('canvas-view')}</span>
					</a>
				</div>
			</div>
			<a class="icon-reload" title="${t("reload")}" @click=${() => refreshJourneysView(data.slug)}></a>
		</header>
	</div>

	${settings.journeysViewMode === 'canvas' ? html`

	<div id="journeysCanvas">
		<canvas id="canvas"></canvas>
	</div>

	` : nothing}

	${settings.journeysViewMode === 'table' ? html`

	<div class="container journeysView">
		${data.earlierRef ? html`<a class="arrowButton icon-arrow2 flipped flex-center" title="${t('label_earlier')}" @click=${() => moreJourneys(data.slug, 'earlier')}></a>` : nothing}

		<div class="card">
		<table>
			<thead>
				<tr>
					<th>${t('departure')}</th>
					<th>${t('arrival')}</th>
					<th>${t('duration')}</th>
					<th>${t('changes')}</th>
					<th>${t('products')}</th>
					${settings.showPrices && settings.profile === 'db' ? html`<th>${t('price')}</th>` : nothing}
					<th></th>
				</tr>
			</thead>
			<tbody>
				${Object.entries(data.journeys).map(([key, value]) => journeyOverviewTemplate(data.profile || "db", value, data.slug, key - data.indexOffset))}
			</tbody>
		</table>
		</div>

		${data.laterRef ? html`<a class="arrowButton icon-arrow2 flex-center" title="${t('label_later')}" @click=${() => moreJourneys(data.slug, 'later')}></a>` : nothing}
	</div>

	${footerTemplate}
	` : nothing}
`;

const journeyOverviewTemplate = (profile, entry, slug, key) => {
	const firstLeg = entry.legs[0];
	const lastLeg = entry.legs[entry.legs.length - 1];

	let changes = 0;
	const products = {};
	let productsString = '';
	const changesDuration = 0;
	let cancelled = false;

	const duration = Number(lastLeg.arrival || lastLeg.plannedArrival) - Number(firstLeg.departure || firstLeg.plannedDeparture);

	for (const leg of entry.legs) {
		if (leg.cancelled) cancelled = true;
		if (leg.walking || leg.transfer) continue;

		changes = changes+1;

		if (leg.line) {
			const productName = leg.line.name.split(' ')[0];
			if (!products[productName]) products[productName] = [];
		}
		//if (leg.line && leg.line.trainTypeShort) products[leg.line.productName].push(leg.line.trainTypeShort);
	}

	productsString = Object.entries(products).map(([prod, types]) => {
		if (types.length >= 2) {
			prod += ' (' + types.join(', ') + ')';
		} else if (types.length) {
			prod += ' ' + types[0];
		}
		return prod;
	}).join(', ');

	return html`
	<tr @click=${() => go(`/j/${profile}/${entry.refreshToken}`)}>
		<td class="${cancelled ? 'cancelled' : ''}">${timeTemplate(firstLeg, 'departure')}</td>
		${cancelled ? html`
			<td><span class="cancelled-text">${t('cancelled-ride')}</span></td>
		` : html`
			<td>${timeTemplate(lastLeg, 'arrival')}</td>
		`}
		<td class="${cancelled ? 'cancelled' : ''}" title="${changesDuration > 0 ? 'including '+formatDuration(changesDuration)+' transfer durations' : ''}">${formatDuration(duration)}</td>
		<td>${changes-1}</td>
		<td>${productsString}</td>
		${settings.showPrices && settings.profile === 'db' ? html`<td>${formatPrice(entry.price)}</td>` : nothing}
		<td><a class="icon-arrow1"></a></td>
	</tr>`;
};

export const journeysView = async (match, isUpdate) => {
	const slug = match[0];
	const mode = match[1];

	if (settings.journeysViewMode != mode) {
		await modifySettings(settings => {
			settings.journeysViewMode = mode;
			return settings;
		});
	}

	let data;

	if (!isUpdate) showLoader();

	try {
		data = await getJourneys(slug);
	} catch(e) {
		await showAlertModal(e.toString());
		go('/');
		throw e;
	}

	if (!data) {
		await showAlertModal(html`journeys overview id invalid. <br />journeys overview links can not be shared across devices in ${APPNAME}.`);
		go('/');
		return;
	}

	hideOverlay();

	render(journeysTemplate(data), ElementById('content'));
	setThemeColor(queryBackgroundColor('header'));

	if (settings.journeysViewMode === 'canvas')
		return setupCanvas(data, isUpdate);
};

export const moreJourneys = async (slug, mode) => {
	showLoader();

	try {
		await getMoreJourneys(slug, mode);
	} catch(e) {
		showAlertModal(e.toString());
		throw e;
	}

	hideOverlay();
	journeysView([slug, settings.journeysViewMode], true);
};

const refreshJourneysView = async (slug) => {
	document.querySelector('.icon-reload').classList.add('spinning');

	try {
		await refreshJourneys(slug, true);
	} catch(e) {
		showAlertModal(e.toString());
		document.querySelector('.icon-reload').classList.remove('spinning');
		throw e;
	}

	journeysView([slug, settings.journeysViewMode], true);
	document.querySelector('.icon-reload').classList.remove('spinning');
};