import { html, nothing } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { choose } from 'lit/directives/choose.js';
import { when } from 'lit/directives/when.js';
import { join } from 'lit/directives/join.js';

import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
import { getJourneys, getMoreJourneys, refreshJourneys, getFromPoint, getToPoint } from './app_functions.js';
import { formatPoint, formatDuration, formatPrice } from './formatters.js';
import { timeTemplate } from './templates.js';
import { t } from './translate.js';

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

import { JourneysCanvas } from './journeysCanvas.js';

export class JourneysView extends JourneysCanvas {
	static styles = [
		super.styles,
		headerStyles,
		tableStyles,
		journeysViewStyles
	];

	static properties = {
		slug:          { attribute: true },
		mode:          { attribute: true },
		viewState:     { state:     true },
	};

	constructor () {
		super();

		this.viewState     = null;
	}

	async connectedCallback () {
		super.connectedCallback();

		if (this.mode === 'canvas') this.connectCanvas();

		await sleep(200);
		setThemeColor(queryBackgroundColor(this.renderRoot, 'header'));
	}

	disconnectedCallback () {
		super.disconnectedCallback();

		this.viewState = null;
		if (this.mode === 'canvas') this.disconnectCanvas();
	}

	async willUpdate (previous) {
		if (previous.has('slug')) {
			this.resetCanvasPosition();
			this.viewState = null;
		}

		if (previous.has('mode')) {
			if (previous.get('mode') === 'canvas' && this.mode !== 'canvas') this.disconnectCanvas();
			if (this.settingsState.journeysViewMode !== this.mode)           this.settingsState.setJourneysViewMode(this.mode);
		}

		if (!this.viewState && !this.overlayState.visible) {
			await this.updateViewState();
			if (this.mode === 'canvas' && this.viewState) await this.getCoachSequences();
		}

		if (this.mode === 'canvas') this.connectCanvas();
	}

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

		if (this.mode === 'canvas') this.renderCanvas();
		if (isDevServer && previous.has('viewState')) console.info('JourneysView(viewState): ', this.viewState);
	}

	renderView = () => [
		html`
			<div class="header-container">
				<header>
					<a class="icon-back" title=${t('back')} href="#/"></a>
					<div class="container flex-row">
						<div>
							<h3>${t('from')}: ${!this.viewState ? '...' : formatPoint(getFromPoint(this.viewState.journeys))}</h3>
							<h3>${t('to')}:   ${!this.viewState ? '...' : formatPoint(getToPoint(this.viewState.journeys))}</h3>
						</div>
						<div class="mode-changers flex-row">
							<a href="#/${this.slug}/table" class="${this.settingsState.journeysViewMode === 'table' ? 'active' : nothing}">
								<div class="icon-table"></div>
								<span>${t('tableView')}</span>
							</a>
							<a href="#/${this.slug}/canvas" class="${this.settingsState.journeysViewMode === 'canvas' ? 'active' : nothing}">
								<div class="icon-canvas"></div>
								<span>${t('canvasView')}</span>
							</a>
						</div>
					</div>
					<a class="icon-reload ${classMap({ spinning: this.isUpdating, invisible: this.isOffline })}" title=${t("refresh")}
					@keydown=${this.keyClickHandler} @click=${this.refreshJourneys}></a>
				</header>
			</div>
		`,
		when(
			!this.viewState,
			() => html`<div class="spinner"></div>`,
			() => choose(this.settingsState.journeysViewMode, [
				[ 'canvas', () => this.getCanvas() ],
				[ 'table',  () => html`
					<div class="container">
						${when(
							this.viewState.earlierRef,
							() => html`<div tabindex=0 class="arrowButton icon-arrow flipped flex-center" title="${t('earlier')}"
							@keydown=${this.keyClickHandler} @click=${() => this.moreJourneys('earlier')}></a>`
						)}

						<div class="table" style="grid-template-columns: repeat(${this.settingsState.showPrices && this.viewState.profile === 'db' ? '6' : '5'}, 1fr) .3fr">
							<div class="row head">
								<span>${t('departure')}</span>
								<span>${t('arrival')}</span>
								<span>${t('duration')}</span>
								<span>${t('changes')}</span>
								<span>${t('products')}</span>
								${when(
									this.settingsState.showPrices && this.viewState.profile === 'db',
									() => html`<span>${t('price')}</span>`
								)}
								<span></span>
							</div>
							${this.viewState.journeys.map(journey => this.journeyTemplate(journey))}
						</div>

						${when(
							this.viewState.laterRef,
							() => html`<a tabindex=0 class="arrowButton icon-arrow flex-center" title="${t('later')}"
							@keydown=${this.keyClickHandler} @click=${() => this.moreJourneys('later')}></a>`
						)}
					</div>
					<footer-component></footer-component>
				` ],
			])
		)
	];

	journeyTemplate = journey => {
		const firstLeg = journey.legs[0];
		const lastLeg  = journey.legs[journey.legs.length - 1];

		return html`
			<a class="row" href="#/j/${this.viewState.profile}/${journey.refreshToken}">
				<span class=${classMap({ cancelled: journey.cancelled })}>${timeTemplate(firstLeg, 'departure')}</span>
				${when(
					!journey.cancelled,
					() => html`<span>${timeTemplate(lastLeg, 'arrival')}</span>`,
					() => html`<span class="cancelled-text">${t('cancelled')}</span>`
				)}
				<span class=${classMap({ cancelled: journey.cancelled })} title="${when(
					journey.changesDuration,
					() => 'including '+formatDuration(journey.changesDuration)+' transfer durations'
				)}">${formatDuration(journey.duration)}</span>
				<span>${journey.changes-1}</span>
				<span>${join(journey.products, ', ')}</span>
				${when(
					this.settingsState.showPrices && this.viewState.profile === 'db',
					() => html`<span>${formatPrice(journey.price)}</span>`
				)}
				<span><i class="icon-arrow" style="transform:rotate(-90deg)"></i></span>
			</a>
		`;
	};

	updateViewState = async () => {
		try {
			let viewState = await getJourneys(this.slug);

			if (!viewState) {
				this.showAlertOverlay(
					html`journeys overview id invalid. <br>journeys overview links can not be shared across devices.`,
					() => {
						window.location = '#/';
					}
				);
				return;
			}

			viewState.journeys.forEach((journey, index, journeys) => {
				const firstLeg = journey.legs[0];
				const lastLeg  = journey.legs[journey.legs.length - 1];

				journeys[index].changesDuration = 0;
				journeys[index].duration        = Number(lastLeg.arrival || lastLeg.plannedArrival) - Number(firstLeg.departure || firstLeg.plannedDeparture);
				journeys[index].cancelled       = false;
				journeys[index].changes         = 0;
				journeys[index].products        = [];

				let previousLegArrival = null;
				journey.legs.forEach(leg => {
					if (leg.cancelled) journeys[index].cancelled = true;
					if (leg.walking || leg.transfer) return;

					if (previousLegArrival) journeys[index].changesDuration += Number(leg.departure || leg.plannedDeparture) - previousLegArrival;

					previousLegArrival = Number(leg.arrival || leg.plannedArrival)
					journeys[index].changes++;

					if (leg.line) {
						const productName = leg.line.name.split(' ')[0];

						if (!journeys[index].products.includes(productName)) {
							journeys[index].products.push(productName);
						}
					}
				});
			});

			this.viewState = viewState;
		} catch(e) {
			this.showAlertOverlay(
				e.toString(),
				() => {
					window.location = '#/';
				}
			);
			console.error(e);
		}
	};

	refreshJourneys = async () => {
		if (this.isOffline || this.isUpdating) return;

		try {
			this.isUpdating = true;

			await refreshJourneys(this.slug);
			await this.updateViewState();

			if (this.mode === 'canvas') await this.getCoachSequences('noCache');

			this.isUpdating = false;
		} catch(e) {
			this.isUpdating = false;
			this.showAlertOverlay(e.toString());
			console.error(e);
		}
	};

	moreJourneys = async mode => {
		if (this.isOffline) {
			this.showAlertOverlay(t('offline'));
			return;
		}

		try {
			this.isUpdating = true;

			this.showLoaderOverlay();
			await getMoreJourneys(this.slug, mode);
			await this.updateViewState();
			this.hideOverlay();

			if (this.mode === 'canvas') await this.getCoachSequences();
			this.isUpdating = false;
		} catch(e) {
			this.isUpdating = false;
			this.hideOverlay();

			this.showAlertOverlay(e.toString());
			console.error(e);
		}
	};

}

customElements.define('journeys-view', JourneysView);