import { html, nothing } from 'lit-html';
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import { formatDateTime, lineAdditionalName } from './formatters.js';
import { showModal } from './overlays.js';
import { settings } from './settings.js';
import { ds100Name } from './app_functions.js';
import { t } from './languages.js';

export const remarksModalTemplate = (remarks) => html`
	<div class="remarksView">
		${remarks.map(remark => html`
			<div class="flex-row">
				<span class="icon-${remark.type}"></span>
				<span>${unsafeHTML(remark.text)}</span>
			</div>
		`)}
	</div>
`;

export const stopTemplate = (profile, stop) => {
	const ds100 = ds100Name(stop.id);
	return html`<a class="flex-center" href="#/d/${profile}/${stop.id}">${stop.name} ${ds100 !== null ? ` (${ds100})` : nothing}</a>`;
}

export const platformTemplate = (data) => {
	if (data.departurePlatform) {
		if (data.departurePlatform != data.plannedDeparturePlatform) {
			return html`<b>${data.departurePlatform}</b>`;
		} else {
			return data.plannedDeparturePlatform;
		}
	} else if (data.platform) {
		if (data.platform != data.plannedPlatform) {
			return html`<b>${data.platform}</b>`;
		} else {
			return data.plannedPlatform;
		}
	} else if (data.arrivalPlatform) {
		if (data.arrivalPlatform != data.plannedArrivalPlatform) {
			return html`<b>${data.arrivalPlatform}</b>`;
		} else {
			return data.plannedArrivalPlatform;
		}
	} else {
		return '-';
	}
};

export const timeTemplate = (data, mode) => {
	const fieldsMap = {
		when: {
			departure: 'departure',
			arrival: 'arrival',
		},
		plannedWhen: {
			departure: 'plannedDeparture',
			arrival: 'plannedArrival',
		},
		delay: {
			departure: 'departureDelay',
			arrival: 'arrivalDelay',
		},
	};
	const getField = fieldName => data[fieldsMap[fieldName][mode] || fieldName];

	const time = getField('when') || getField('plannedWhen');
	if (!time) return '-';

	const delayMinutes = Math.round(getField('delay') / 60);

	return html`
		${delayMinutes != 0 ? html`
			${formatDateTime(time)} <b>(${delayMinutes > 0 ? '+' : ''}${delayMinutes})</b>
		` : html`
			${formatDateTime(time)}
		`}
	`;
};


export const footerTemplate = html`
	<footer class="center">
		<a href="https://git.ctu.cx/trainsearch" title="commit ${COMMIT} from ${COMMITDATE}">Source-Code (${VERSION})</a>
		<a href="https://ctu.cx/imprint.html">Imprint</a>
	</footer>
`;