import { LitElement, html } from 'lit';
import { cache } from 'lit/directives/cache.js';

import { initDataStorage }  from './dataStorage.js';
import { initHafasClient }  from './hafasClient.js';
import { initSettingsState, settingsState } from './settings.js'

import { baseStyles } from './styles.js';

import './searchView.js';
import './journeysView.js';
import './journeyView.js';
import './tripView.js';
import './departuresView.js';
import './settingsView.js';
import './footerComponent.js';

class Oeffisearch extends LitElement {
	static properties = {
		outlet: { state: true },
	};

	routes = [
		{
			pattern: /^\/$/,
			render: param => html`<search-view></search-view>`
		}, {
			pattern: /^\/([a-zA-Z0-9]+)\/([a-z]+)$/,
			render: param => html`<journeys-view slug="${param[0]}" mode="${param[1]}"></journeys-view>`
		}, {
			pattern: /^\/j\/([a-z]+)\/(.+)$/,
			render: param => html`<journey-view profile="${param[0]}" refreshToken="${param[1]}"></journey-view>`
		}, {
			pattern: /^\/t\/([a-z]+)\/(.+)$/,
			render: param => html`<trip-view profile="${param[0]}" refreshToken="${param[1]}"></trip-view>`
		}, {
			pattern: /^\/d\/([a-z]+)\/([^/]+)(\/[0-9]+)?$/,
			render: param => html`<departures-view profile="${param[0]}" stopId="${param[1]}" when="${param[2]}"></departures-view>`
		}
	];

	constructor () {
		super();
		this.outlet = html``;
		if (!window.location.hash.length) window.location = '#/';
	}

	connectedCallback () {
		super.connectedCallback();
		window.addEventListener('hashchange', this.routeHandler);
		this.routeHandler();
	}

	disconnectedCallback () {
		super.disconnectedCallback();
		window.removeEventListener('hashchange', this.routeHandler);
	}

	render = () => cache(this.outlet);

	routeHandler = () => {
		const dest = window.location.hash.slice(1);
		this.routes.forEach(route => {
			const match = route.pattern.exec(dest);
			if (match !== null) this.outlet = route.render(match.slice(1));
		});
	}
}

customElements.define('oeffi-search', Oeffisearch);

window.addEventListener('load', async () => {
	await initSettingsState();
	await initDataStorage();
	await initHafasClient(settingsState.profile);

	const style = document.createElement('style');
	style.type = 'text/css';
	style.appendChild(document.createTextNode(baseStyles));

	document.head.appendChild(style);
	document.body.innerHTML = '<oeffi-search></oeffi-search>';

	if (!isDevServer) {
		navigator.serviceWorker.register('/sw.js').then(registration => {
			console.log('SW registered: ', registration);
		}).catch(registrationError => {
			console.log('SW registration failed: ', registrationError);
		});
	}
});