import { html, css, nothing } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';

import { settingsState } from './settings.js';
import { getDS100byIBNR } from './ds100.js';
import { CustomDate } from './helpers.js';

export const remarksModal = (element, remarks) => element.showDialogOverlay('remarks', [
	remarks.map(remark => html`
		<div class="flex-row">
			<span class="icon-${remark.type}"></span>
			<span>${unsafeHTML(remark.text)}</span>
		</div>
	`),
	html`<style>${css`
		.flex-row {
			align-items: center;
			flex-wrap: nowrap !important;
			padding: .5em;
			border-bottom: 1px solid rgba(0, 0, 0, .4);
		}

		.flex-row:last-child {
			border-bottom: unset;
		}

		span[class^="icon-"] {
			align-self: start;
			padding-right: .3em;
		}
	`}</style>`
]);

export const stopTemplate = (profile, stop) => {
	let stopName = stop.name;
	if (settingsState.showDS100) {
		const ds100 = getDS100byIBNR(stop.id);
		if (ds100 !== null) stopName += ` (${ds100})`;
	}

	return html`<a href="#/d/${profile}/${stop.id}">${stopName}</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];

	let   timeStr;
	const dateObj = getField('when') || getField('plannedWhen');
	if (!dateObj) return '-';

	if (dateObj.toLocaleDateString() !== new CustomDate().toLocaleDateString()) {
		timeStr = `${dateObj.formatTime()}, ${dateObj.getDate()}.${dateObj.getMonth() + 1}.`;
	} else {
		timeStr = dateObj.formatTime();
	}

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

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