import { html, css, nothing } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { when } from 'lit/directives/when.js';
import { BaseView } from './baseView.js';
import { createEvents } from 'ics';

import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
import { db } from './dataStorage.js';
import { t } from './translate.js';
import { getJourney, refreshJourney } from './app_functions.js';
import { remarksModal, platformTemplate, stopTemplate, timeTemplate } from './templates.js';
import { formatPoint, formatDuration, formatPrice, formatTrainTypes, formatLineAdditionalName, formatLineDisplayName } from './formatters.js';
import { cachedCoachSequence } from './coach-sequence/index.js';

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

class JourneyView 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('refreshToken')) this.viewState = null;

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

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

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

	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">
						<a class="icon-reload ${classMap({ spinning: this.isUpdating, invisible: this.isOffline })}" title=${t("refresh")} @click=${this.refreshJourney}></a>
						${when(!this.viewState,
							() => html`
								<h3>
									<span>...</span>
									<span>...</span>
								</h3>
								<p>
									<span>${t('duration')}: ...</span>
									<span>${t('changes')}: ...</span>
									<span>${t('date')}: ...</span>
								</p>
							`,
							() => html`
								<h3>
									<span>${formatPoint(this.viewState.legs[0].origin)}</span>
									<span>${formatPoint(this.viewState.legs[this.viewState.legs.length - 1].destination)}</span>
								</h3>
								<p>
									<span>${t('duration')}: ${formatDuration(this.viewState.duration)}</span>
									<span>${t('changes')}: ${this.viewState.changes-1}</span>
									<span>${t('date')}: ${this.viewState.legs[0].plannedDeparture.formatDate()}</span>
									${when(
										this.settingsState.showPrices && this.viewState.price,
										() => html`<span> ${t('price')}: ${formatPrice(this.viewState.price)}</span>`
									)}
								</p>
							`
						)}
					</div>
					<a class="icon-dots" title=${t("more")} @click=${this.moreModal}></a>
				</header>
			</div>
		`, 
		when(!this.viewState,
			() => html`<div class="spinner"></div>`,
			() => html`
				<div class="container">${this.viewState.legs.map(leg => this.legTemplate(leg))}</div>
				<footer-component></footer-component>
			`
		)
	];

	legTemplate = leg => {
		if (leg.walking) {
			return html`<p class="walk">${t(leg.distance === null ? 'walkinfo' : 'walkinfoMeters', formatPoint(leg.destination), leg.distance)}</p>`;
		} else if (leg.transfer) {
			return html`<p class="transfer">${t('transferinfo', formatPoint(leg.destination))}</p>`;
		} else if (leg.change) {
			return html`<p class="change">${t('changeinfo', formatDuration(leg.duration))}</p>`;
		} else {
			return html`
				<div class="card">
					<div class="train-info flex-center nowrap">
						<a href="#/t/${this.profile}/${leg.tripId}">${formatLineDisplayName(leg.line)}${!leg.direction ? nothing : html` → ${leg.direction}`}</a>
						${when(leg.remarks.length !== 0, () => html`<a class="${leg.remarksIcon}" @click=${() => remarksModal(this, leg.remarks)}></a>`)}
					</div>
					<div class="train-info flex-center">
						${when(
							leg.cancelled,
							() => html`<span class="cancelled-text">${t('cancelled')}</span>`
						)}
						${when(
							formatLineAdditionalName(leg.line) !== null,
							() => html`<span>Trip: ${formatLineAdditionalName(leg.line)}</span>`
						)}
						${when(
							leg.line.trainType,
							() => html`<span>${t('trainType')}: ${leg.line.trainType}</span>`
						)}
						${when(
							leg.arrival && leg.departure,
							() => html`<span>${t('duration')}: ${formatDuration(leg.arrival - leg.departure)}</span>`
						)}
						${when(
							leg.loadFactor,
							() => html`<span>${t(`load-${leg.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>
						${(leg.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>
			`;
		}
	};

	updateViewState = async viewState => {
		const wasUpdating = this.isUpdating;
		this.isUpdating = true;
		try {
			if (viewState === undefined) viewState = await getJourney(this.profile, this.refreshToken);

			if (viewState.slug) {
				let overviewObject = await db.getJourneysOverview(viewState.slug);
				let historyObject  = await db.getHistoryEntry(overviewObject.historyEntryId);

				historyObject.lastSelectedJourneyId = viewState.refreshToken;

				await db.updateHistoryEntry(overviewObject.historyEntryId, historyObject);
			}

			viewState.changes  = 0;
			viewState.duration = null;

			if (viewState.legs[viewState.legs.length - 1].arrival && viewState.legs[0].departure)
				viewState.duration = viewState.legs[viewState.legs.length - 1].arrival - viewState.legs[0].departure;

			let lastArrival;
			viewState.legs = viewState.legs.flatMap(leg => {
				if (!leg.remarks) leg.remarks = [];

				let legs = [];

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

				if (!leg.walking && !leg.transfer) {
					// add change
					if (lastArrival) {
						let duration = null;

						if (leg.departure && lastArrival) duration = leg.departure - lastArrival;

						legs.push({
							change: true,
							duration,
						});
					}
					viewState.changes++;

					lastArrival = leg.arrival;
				} else if (legs.length) {
					// if this is a walking leg and it is the first one, we don't want to
					// insert a 0 minutes change entry for this
					lastArrival = leg.arrival;
				}

				legs.push(leg);

				return legs
			});

			this.viewState = viewState;

			if (isDevServer) console.info('JourneyView(updateViewState): coach sequence fetch start');
			//fetch train types after setting the viewState
			if (!this.isOffline) {
				for (const leg of this.viewState.legs) {
					if (leg.line && leg.line.name) {
						const [category, number] = leg.line.name.split(' ');
						const info               = cachedCoachSequence(category, leg.line.fahrtNr || number, leg.origin.id, leg.plannedDeparture);

						if (info) leg.line.trainType = formatTrainTypes(info);
						this.requestUpdate();
					}
				}
			}
			if (isDevServer) console.info('JourneyView(updateViewState): coach sequence fetch end');
		} catch(e) {
			this.showAlertOverlay(
				e.toString(),
				() => {
					window.location = '#/';
				}
			);
			console.error(e);
		}
		if (!wasUpdating) this.isUpdating = false;
	};

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

		this.isUpdating = true;
		try {
			const data = await refreshJourney(this.profile, this.refreshToken);
			await this.updateViewState(data);
		} catch(e) {
			this.showAlertOverlay(e.toString());
			console.error(e);
		}
		this.isUpdating = false;
	};

	moreModal = async () => {
		const options = [
			{ 'label': !navigator.canShare ? 'copyURL' : 'shareURL', 'action': async () => await this.shareAction()    },
		];

		if (isDevServer) options.push({ 'label': 'addCalendar', 'action': async () => await this.calendarAction() });

		if (this.profile === 'db') options.push({ 'label': 'tickets', 'action': async () => await this.ticketsAction() });

		this.showSelectOverlay(options);
	};

	shareAction = async () => {
		try {
			await navigator.share({ url: window.location });
		} catch (error) {
			await navigator.clipboard.writeText(window.location);
			this.showAlertOverlay('URL has been copied to clipboard.');
		}
	};

	ticketsAction = async () => {
		try {
			this.showLoaderOverlay();

			if (!this.isOffline) await this.refreshJourney();

			if (this.viewState.tickets === undefined) {
				await this.showAlertOverlay('No ticket data available');
				return false;
			}

			this.showDialogOverlay('tickets', html`
				${this.viewState.tickets.map(ticket => html`
				<div class="flex-row">
					<div class="icon-ticket"></div>
					<div>
						<b>${ticket.name} <small>${ticket.firstClass ? `1. ${t('class')}` : nothing}</small></b><br>
						<small>${ticket.addDataTicketDetails}</small>
						<br>
						<b>${ticket.priceObj.amount / 100}</b>
					</div>
				</div>
				`)}
				<style>${css`
					.flex-row{
						flex-wrap: nowrap;
						padding: .5em;
						border-bottom: 1px solid rgba(0, 0, 0, .4);
					}

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

					.icon-ticket {
						align-self: start;
						padding-right: .3em;
					}
				`}</style>
			`);
		} catch(e) {
			this.showAlertOverlay(e.toString());
			console.error(e);
		}
	};

	calendarAction = async () => {
		let events = [];

		this.viewState.legs.forEach(leg => {
			if (!leg.line) return;

			const departureStop = leg.origin.location

			events.push({
				productId:   APP_NAME,
				created:     (new Date).getTime(),
				start:       leg.plannedDeparture.getTime(),
				end:         leg.plannedArrival.getTime(),
				title:       `${leg.line.name} → ${formatPoint(leg.destination)}`,
				url:         window.location.href,
				geo:         { lat: departureStop.latitude , lon: departureStop.longitude },
				description: `${leg.line.name} → ${leg.direction}\n
				dep ${timeTemplate(departureStop, 'departure')} ${formatPoint(departureStop)}`,
			});
		});

		const file = await new Promise((resolve, reject) => {
			const { error, value } = createEvents(events);

			if (error) reject(error);

			resolve(new File([value], 'event.ics', { type: 'text/calendar' }));
		});

		window.location = URL.createObjectURL(file);
	};

}

customElements.define('journey-view', JourneyView);