import { html, nothing } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { classMap } from 'lit/directives/class-map.js';
import { when } from 'lit/directives/when.js';
import { BaseView } from './baseView.js';

import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
import { cachedCoachSequence } from './coach-sequence/index.js';
import { remarksModal, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
import { processLeg } from './app_functions.js';
import { formatDuration, formatLineAdditionalName, formatLineDisplayName, formatTrainTypes } from './formatters.js';
import { getHafasClient } from './hafasClient.js';
import { t } from './translate.js';

import { headerStyles, tableStyles, journeyViewStyles } from './styles.js';

class TripView extends BaseView {
	static styles = [
		super.styles,
		headerStyles,
		tableStyles,
		journeyViewStyles
	];

	static properties = {
		profile:      { attribute: true },
		refreshToken: { attribute: true, converter: (value) =>  decodeURIComponent(value)},
		viewState:    { state: true },
	};

	constructor () {
		super();

		this.viewState = null;
	}

	async connectedCallback () {
		super.connectedCallback();
		await sleep(200);
		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
	}

	disconnectedCallback () {
		super.disconnectedCallback();

		this.viewState = null;
	}

	async willUpdate (previous) {
		if (previous.has('stopId')) this.viewState = null;

		if (!this.viewState && !this.overlayState.visible) await this.updateViewState();
	}

	updated (previous) {
		super.updated(previous, 'TripView');

		if (isDevServer && previous.has('viewState')) console.info('TripView(viewState): ', this.viewState);
	}

	updateViewState = async () => {
		if (this.isOffline !== false) return;

		this.isUpdating = true;
		try {
			const client    = await getHafasClient(this.profile);
			let   viewState = await client.trip(this.refreshToken, {stopovers: true});

			processLeg(viewState.trip);

			// needed fix for bug/typo in vendo-client
			if (viewState.trip.canceled === true) viewState.trip.cancelled = true;

			if (!viewState.trip.remarks) viewState.trip.remarks = [];

			const remarksStatus  = viewState.trip.remarks.some((obj) => obj.type === 'status');
			const remarksWarning = viewState.trip.remarks.some((obj) => obj.type === 'warning');
			viewState.trip.remarksIcon = remarksWarning ? 'icon-warning' : (remarksStatus ? 'icon-status' : 'icon-hint');

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

			this.viewState = viewState;

			if (this.viewState.trip.line && this.viewState.trip.line.name) {
				const [category, number] = this.viewState.trip.line.name.split(' ');
				const info               = cachedCoachSequence(category, this.viewState.trip.line.fahrtNr || number, this.viewState.trip.origin.id, this.viewState.trip.plannedDeparture);

				if (info) this.viewState.trip.line.trainType = formatTrainTypes(info);
				this.requestUpdate();
			}
		} catch(e) {
			this.showAlertOverlay(
				e.toString(),
				() => {
					window.location = '#/';
				}
			);
			console.error(e);
		}
		this.isUpdating = false;
	};

	renderView = () => [
		html`
			<div class="header-container">
				<header>
					<a class="icon-back ${classMap({ invisible: history.length === 1 })}" title=${t('back')} @click=${() => history.back()}></a>
					<div class="container">
					${when(
						!this.viewState,
						() => html`<h3>Trip of ...</h3>`,
						() => [
							when(
								this.viewState.trip.bahnExpertUrl,
								() => html`<a class="icon-bahnexpert" href="${this.viewState.trip.bahnExpertUrl}"></a>`
							),
							html`<h3>Trip of ${formatLineDisplayName(this.viewState.trip.line)} to ${this.viewState.trip.direction}</h3>`
						]
					)}
					</div>
					<a class="icon-reload ${classMap({ spinning: this.isUpdating, invisible: this.isOffline })}" title=${t("refresh")} @click=${this.updateViewState}></a>
				</header>
			</div>
		`,

		when(
			!this.viewState,
			() => when(
				!this.isOffline,
				() => html`<div class="spinner"></div>`,
				() => html`<div class="offline"></div>`
			),
			() => html`
				<div class="container">
					<div class="card">
						<div class="train-info flex-center nowrap">
							${formatLineDisplayName(this.viewState.trip.line)}
							${when(
								this.viewState.trip.direction,
								() => html` → ${this.viewState.trip.direction}`
							)}

							${when(
								this.viewState.trip.remarks.length !== 0, 
								() => html`<a class="${this.viewState.trip.remarksIcon}" @click=${() => remarksModal(this, this.viewState.trip.remarks)}></a>`
							)}
						</div>

						<div class="train-info flex-center">
							${when(
								this.viewState.trip.cancelled,
								() => html`<span class="cancelled-text">${t('cancelled')}</span>`
							)}

							${when(
								formatLineAdditionalName(this.viewState.trip.line),
								() => html`<span>Trip: ${formatLineAdditionalName(this.viewState.trip.line)}</span>`
							)}

							${when(
								this.viewState.trip.line.trainType,
								() => html`<span>Train type: ${this.viewState.trip.line.trainType}</span>`
							)}

							${when(
								!this.viewState.trip.cancelled,
								() => html`
									<span>
										${t('duration')}:
										${formatDuration(
											(this.viewState.trip.arrival   ? this.viewState.trip.arrival   : this.viewState.trip.plannedArrival) - 
											(this.viewState.trip.departure ? this.viewState.trip.departure : this.viewState.trip.plannedDeparture)
										)}
									</span>
								`
							)}

							${when(
								this.viewState.trip.loadFactor,
								() => html`<span>${t("load-"+this.viewState.trip.loadFactor)}</span>`
							)}
						</div>

						<div class="table">
							<div class="row head">
								<span>${t('arrival')}</span>
								<span>${t('departure')}</span>
								<span class="station">${t('station')}</span>
								<span>${t('platform')}</span>
							</div>
							${(this.viewState.trip.stopovers || []).map(stop => html`
								<div class="row">
									<span class=${classMap({ cancelled: stop.cancelled })}>
										${timeTemplate(stop, 'arrival')}
									</span>
									<span class=${classMap({ cancelled: stop.cancelled })}>
										${timeTemplate(stop, 'departure')}
									</span>
									<span class="station ${classMap({ cancelled: stop.cancelled })}">
										${stopTemplate(this.profile, stop.stop)}
									</span>
									<span class=${classMap({ cancelled: stop.cancelled })}>
										${platformTemplate(stop)}
									</span>
								</div>
							`)}
						</div>
					</div>
				</div>
				<footer-component></footer-component>
			`
		)
	];

}

customElements.define('trip-view', TripView);