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

import { sleep, queryBackgroundColor, setThemeColor } from './helpers.js';
import { getLanguages, t } from './translate.js';
import { initHafasClient, profiles } from './hafasClient.js';
import { clearDataStorage } from './dataStorage.js';

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

class SettingsView extends BaseView {
	static styles = [
		super.styles,
		settingsViewStyles
	];

	updated (previous) {
		super.updated(previous, 'SettingsView');
	}

	render = () => [
		html`
			<div class="flex-row">
				<label for="language">${t('language')}:</label>
				<select id="language" @change=${this.changeHandler}>
					${getLanguages().map(lang => html`<option value="${lang}" ?selected=${this.settingsState.language === lang}>${t(lang)}</option>`)}
				</select>
			</div>
		`,
		html`
			<div class="flex-row">
				<label for="profile">${t('datasource')}:</label>
				<select id="profile" @change=${this.changeHandler}>
					${Object.keys(profiles).map(profile => html`<option value="${profile}" ?selected=${this.settingsState.profile === profile}>${profiles[profile].name}</option>`)}
				</select>
			</div>
		`,
		when(this.settingsState.profile !== 'db', () => html`
			<div class="flex-row">
				<label for="accessibility">${t('accessibility')}:</label>
				<select id="accessibility" @change=${this.changeHandler}>
					<option value="none"     ?selected=${this.settingsState.accessibility === 'none'}>${t('accessibilityNone')}</option>
					<option value="partial"  ?selected=${this.settingsState.accessibility === 'partial'}>${t('accessibilityPartial')}</option>
					<option value="complete" ?selected=${this.settingsState.accessibility === 'complete'}>${t('accessibilityComplete')}</option>
				</select>
			</div>
		`),
		when(this.settingsState.profile !== 'db', () => html`
			<div class="flex-row">
				<label for="walkingSpeed">${t('walkingSpeed')}:</label>
				<select id="walkingSpeed" @change=${this.changeHandler}>
					<option value="slow"   ?selected=${this.settingsState.walkingSpeed === 'slow'}>${t('walkingSpeedSlow')}</option>
					<option value="normal" ?selected=${this.settingsState.walkingSpeed === 'normal'}>${t('walkingSpeedNormal')}</option>
					<option value="fast"   ?selected=${this.settingsState.walkingSpeed === 'fast'}>${t('walkingSpeedFast')}</option>
				</select>
			</div>
		`),
		when(this.settingsState.profile === 'db', () => html`
			<div class="flex-row">
				<label for="ageGroup">${t('ageGroup')}:</label>
				<select id="ageGroup" @change=${this.changeHandler}>
					<option value="K" ?selected=${this.settingsState.ageGroup === 'K'}>${t('ageGroupChild')} (7-14)</option>
					<option value="Y" ?selected=${this.settingsState.ageGroup === 'Y'}>${t('ageGroupYoung')} (15-26)</option>
					<option value="E" ?selected=${this.settingsState.ageGroup === 'E'}>${t('ageGroupAdult')} (27-64)</option>
					<option value="S" ?selected=${this.settingsState.ageGroup === 'S'}>${t('ageGroupSenior')} (65+)</option>
				</select>
			</div>
		`),
		when(this.settingsState.profile === 'db', () => html`
			<div class="flex-row">
				<label for="loyaltyCard">${t('loyaltyCard')}:</label>
				<select id="loyaltyCard" @change=${this.changeHandler}>
					<option value="NONE"           ?selected=${this.settingsState.loyaltyCard === 'NONE'}>${t('loyaltyCardNone')}</option>
					<option value="BAHNCARD-25-2"  ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-25-2'}>BahnCard 25, 2. ${t("class")}</option>
					<option value="BAHNCARD-25-1"  ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-25-1'}>BahnCard 25, 1. ${t("class")}</option>
					<option value="BAHNCARD-50-2"  ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-50-2'}>BahnCard 50, 2. ${t("class")}</option>
					<option value="BAHNCARD-50-1"  ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-50-1'}>BahnCard 50, 1. ${t("class")}</option>
					<option value="BAHNCARD-100-2" ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-100-2'}>BahnCard 100, 2. ${t("class")}</option>
					<option value="BAHNCARD-100-1" ?selected=${this.settingsState.loyaltyCard === 'BAHNCARD-100-1'}>BahnCard 100, 1. ${t("class")}</option>
				</select>
			</div>
		`),
		html`
			<div class="flex-row">
				<label for="transferTime">${t('minTransferTime')}:</label>
				<input type="number" id="transferTime" min="0" max="99" @change=${this.changeHandler} .value="${this.settingsState.transferTime}">
			</div>
		`,
		html`
			<div class="flex-column">
				<span>${t('options')}:</span><br>
				<label><input type="checkbox" id="showDS100"       @change=${this.changeHandler} ?checked=${this.settingsState.showDS100}> ${t('showDS100')}<br></label>
				<label><input type="checkbox" id="combineDateTime" @change=${this.changeHandler} ?checked=${this.settingsState.combineDateTime}> ${t('combineDateTime')}<br></label>
				<label class="${classMap({ hidden: this.settingsState.profile !== 'db' })}">
					<input type="checkbox" id="showPrices" @change=${this.changeHandler} ?checked=${this.settingsState.showPrices}> ${t('showPrices')}
				</label>
			</div>
		`,
		html`
			<div class="flex-row">
				<div class="button color icon-trashcan" title="${t('clearstorage')}" @click=${this.clearStorage}></div>
			</div>
		`,
	];

	changeHandler = async event => {
		const id    = event.target.id;
		const value = event.target.value;
		
		if (id === 'language')        this.settingsState.setLanguage(value);
		if (id === 'walkingSpeed')    this.settingsState.setWalkingSpeed(value);
		if (id === 'accessibility')   this.settingsState.setAccessibility(value);
		if (id === 'transferTime')    this.settingsState.setTransferTime(parseInt(value));
		if (id === 'ageGroup')        this.settingsState.setAgeGroup(value);
		if (id === 'loyaltyCard')     this.settingsState.setLoyaltyCard(value);
		if (id === 'showDS100')       this.settingsState.toggleShowDS100();
		if (id === 'showPrices')      this.settingsState.toggleShowPrices();
		if (id === 'combineDateTime') this.settingsState.toggleCombineDateTime();
		if (id === 'profile') {
			this.settingsState.setProfile(value);
			await initHafasClient(this.settingsState.profile);
		}
	};

	clearStorage = () => {
		if (confirm('Do you really want to delete all local data?')) {
			clearDataStorage();
			localStorage.clear();

			caches.keys().then(names => names.forEach(name => caches.delete(name)));

			location.reload();
		}
	};

}

customElements.define('settings-view', SettingsView);