import { html, nothing, render } from 'lit-html';
import { settings } from './settings.js';
import { remarksModalTemplate, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
import { ElementById, showElement, setThemeColor, queryBackgroundColor } from './helpers.js';
import { processLeg } from './app_functions.js';
import { formatDateTime, formatDuration, formatPrice, formatLineAdditionalName, formatLineDisplayName } 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 tripTemplate = (data, profile, refreshToken) => {
	let changes = 0;
	let lastArrival;

	const remarks        = data.remarks || [];
	const remarksStatus  = remarks.some((obj) => obj.type === 'status');
	const remarksWarning = remarks.some((obj) => obj.type === 'warning');
	const remarksIcon    = remarksWarning ? 'icon-warning' : (remarksStatus ? 'icon-status' : 'icon-hint');

	let bahnExpertUrl = null;
	if (data.line && (data.line.product == 'nationalExpress' || data.line.product == 'national' || data.line.product == 'regionalExpress' || data.line.product == 'regional')) {
		const trainName = formatLineAdditionalName(data.line) || data.line?.name;
		if (trainName) {
			bahnExpertUrl = 'https://bahn.expert/details/' + encodeURIComponent(trainName) + '/' + Number(data.plannedDeparture);
		}
	}

	return html`
		<div class="header-container">
			<header>
				<a id="back" class="icon-back hidden" title="${t('back')}" @click=${() => history.back()}>$</a>
				<div class="container">
					<h3>Trip of ${formatLineDisplayName(data.line)} to ${data.direction}</h3>
				</div>
				<a class="icon-reload" title="${t('title')}" @click=${() => refreshTripView(profile, refreshToken)}></a>
			</header>
		</div>

		<div class="container journeyView">
			<div class="card">
				<table>
					<thead>
						<tr>
							<td colspan="4">
								<div class="center">${bahnExpertUrl ? html`
									<a href="${bahnExpertUrl}">${formatLineDisplayName(data.line)}${data.direction ? html` → ${data.direction}` : ''}</a>
								` : html `
									${formatLineDisplayName(data.line)}${data.direction ? html` → ${data.direction}` : ''}
								`}
								${data.cancelled ? html`<b class="cancelled-text">${t('cancelled-ride')}</b>` : ''}
								${!!remarks.length ? html`<a class="link ${remarksIcon}" @click=${() => showModal(t('remarks'), remarksModalTemplate(remarks))}></a>` : nothing}</div>
							</td>
						</tr>
						<tr>
							<td colspan="4">
								<div class="train-details center">
									${formatLineAdditionalName(data.line) ? html`
										<div>
											Trip: ${formatLineAdditionalName(data.line)}
										</div>
									` : nothing}
									${data.line.trainType ? html`
										<div>
											Train type: ${data.line.trainType}
										</div>
									` : nothing}
									<div ${data.cancelled ? 'cancelled' : ''}">
										${t('duration')}: ${formatDuration(data.arrival - (data.departure ? data.departure : data.plannedDeparture))} ${data.departure ? '' : ('(' + t('planned') + ')')}
									</div>
									${data.loadFactor ? html`
										<div
											${t("load-"+data.loadFactor)}
										</div>
									` : nothing}
								</div>
							</td>
						</tr>
						<tr>
							<th>${t('arrival')}</th>
							<th>${t('departure')}</th>
							<th class="station">${t('station')}</th>
							<th>${t('platform')}</th>
						</tr>
					</thead>
					<tbody>
						${(data.stopovers || []).map(stop => html`
							<tr class="${stop.cancelled ? 'cancelled' : ''}">
								<td>${timeTemplate(stop, 'arrival')}</td>
								<td>${timeTemplate(stop, 'departure')}</td>
								<td>${stopTemplate(profile, stop.stop)}</td>
								<td>${platformTemplate(stop)}</td>
							</tr>
						`)}
					</tbody>
				</table>
			</div>
		</div>
	`;
};

export const tripView = async (match, isUpdate) => {
	if (!isUpdate) showLoader();
	let profile, refreshToken, data;

	try {
		profile = match[0];
		refreshToken = decodeURIComponent(match[1]);
		const client = await getHafasClient(profile);
		data = await client.trip(refreshToken, {stopovers: true});
		processLeg(data.trip);
	} catch(e) {
		showAlertModal(e.toString());
		throw e;
	}

	hideOverlay();

	render(tripTemplate(data.trip, profile, refreshToken), ElementById('content'));
	setThemeColor(queryBackgroundColor('header'));

	console.log(data)

	if (history.length > 0) showElement(ElementById('back'));
};

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

	let data;

	try {
		const client = await getHafasClient(profile);
		data = await client.trip(refreshToken, {stopovers: true});
		processLeg(data.trip);
	} catch(e) {
		showAlertModal(e.toString());
		throw e;
	}

	render(tripTemplate(data.trip, profile, refreshToken), ElementById('content'));
	document.querySelector('.icon-reload').classList.remove('spinning');
};