import { html, render } from 'lit-html';
import { db, clearDataStorage } from './dataStorage.js';
import { modifySettings, settings } from './settings.js';
import { showModal, hideOverlay } from './overlays.js';
import { ElementById, hideElement, showElement } from './helpers.js';
import { t, getLanguages } from './languages.js';
import { searchView } from './searchView.js';
import { initHafasClient } from './hafasClient.js';

export const showSettings = async () => {
	showModal(t('settings'), settingsTemplate());
	profileChangeHandler(settings.profile);
};

const settingsTemplate = () => html`
	<div class="settingsView">
		<div class="flex-row">
			<label for="language">${t('language')}:</label>
			<select id="language">
				${getLanguages().map(lang => html`
					<option value="${lang}" ?selected=${settings.language === lang}>${t(lang)}</option>
				`)}
			</select>
		</div>

		<div class="flex-row">
			<label for="profile">${t('datasource')}:</label>
			<select id="profile" @change="${(event) => {profileChangeHandler(event.target.value)}}">
				<option value="db"    ?selected=${settings.profile === 'db'}>DB</option>
				<option value="nahsh" ?selected=${settings.profile === 'nahsh'}>NAH.SH</option>
				<option value="rmv"   ?selected=${settings.profile === 'rmv'}>RMV</option>
				<option value="vrn"   ?selected=${settings.profile === 'vrn'}>VRN</option>
				<option value="bvg"   ?selected=${settings.profile === 'bvg'}>BVG</option>
				<option value="oebb"  ?selected=${settings.profile === 'oebb'}>ÖBB</option>
			</select>
		</div>

		<div class="flex-row" id="walkingSpeedElement">
			<label for="walkingSpeed">${t('walkingSpeed')}:</label>
			<select id="walkingSpeed">
				<option value="slow"   ?selected=${settings.walkingSpeed === 'slow'}>${t('walkingSpeedSlow')}</option>
				<option value="normal" ?selected=${settings.walkingSpeed === 'normal'}>${t('walkingSpeedNormal')}</option>
				<option value="fast"   ?selected=${settings.walkingSpeed === 'fast'}>${t('walkingSpeedFast')}</option>
			</select>
		</div>

		<div class="flex-row" id="ageGroupElement">
			<label for="ageGroup">${t('ageGroup')}:</label>
			<select id="ageGroup">
				<option value="K" ?selected=${settings.ageGroup === 'K'}>${t('ageGroupChild')} (7-14)</option>
				<option value="Y" ?selected=${settings.ageGroup === 'Y'}>${t('ageGroupYoung')} (15-26)</option>
				<option value="E" ?selected=${settings.ageGroup === 'E'}>${t('ageGroupAdult')} (27-64)</option>
				<option value="S" ?selected=${settings.ageGroup === 'S'}>${t('ageGroupSenior')} (65+)</option>
			</select>
		</div>

		<div class="flex-row" id="loyaltyCardElement">
			<label for="loyaltyCard">${t('loyaltyCard')}:</label>
			<select id="loyaltyCard">
				<option value="NONE"          ?selected=${settings.loyaltyCard === 'NONE'}>${t('loyaltyCardNone')}</option>
				<option value="BAHNCARD-25-2" ?selected=${settings.loyaltyCard === 'BAHNCARD-25-2'}>BahnCard 25, 2. ${t("class")}</option>
				<option value="BAHNCARD-25-1" ?selected=${settings.loyaltyCard === 'BAHNCARD-25-1'}>BahnCard 25, 1. ${t("class")}</option>
				<option value="BAHNCARD-50-2" ?selected=${settings.loyaltyCard === 'BAHNCARD-50-2'}>BahnCard 50, 2. ${t("class")}</option>
				<option value="BAHNCARD-50-1" ?selected=${settings.loyaltyCard === 'BAHNCARD-50-1'}>BahnCard 50, 1. ${t("class")}</option>
				<option value="BAHNCARD-100-2" ?selected=${settings.loyaltyCard === 'BAHNCARD-100-2'}>BahnCard 100, 2. ${t("class")}</option>
				<option value="BAHNCARD-100-1" ?selected=${settings.loyaltyCard === 'BAHNCARD-100-1'}>BahnCard 100, 1. ${t("class")}</option>
			</select>
		</div>

		<div class="flex-column">
			<span>${t('options')}:</span>
			<label id="showPricesElement"><input type="checkbox" id="showPrices" ?checked=${settings.showPrices}> ${t('show-prices')}<br></label>
			<label id="showDS100Element"><input type="checkbox" id="showDS100" ?checked=${settings.showDS100}> ${t('showds100')}<br></label>
			<label><input type="checkbox" id="combineDateTime" ?checked=${settings.combineDateTime}> ${t('combineDateTime')}</label>
		</div>

		<div class="flex-row">
			<button class="color" id="clear" @click=${clearStorage}>${t('clearstorage')}</button>
			<button class="color" id="save" @click=${saveSettings}>${t('save')}</button>
		</div>
	</div>
`;

const profileChangeHandler = (profile) => {
	switch (profile) {
		case 'db':
			showElement(ElementById('showPricesElement'));
			showElement(ElementById('loyaltyCardElement'));
			showElement(ElementById('ageGroupElement'));
			hideElement(ElementById('walkingSpeedElement'));
			break;

		default:
			showElement(ElementById('walkingSpeedElement'));
			hideElement(ElementById('showPricesElement'));
			hideElement(ElementById('loyaltyCardElement'));
			hideElement(ElementById('ageGroupElement'));
			break;
	};
};

const clearStorage = async () => {
	clearDataStorage();

	caches.keys().then(names => {
		for (let name of names) caches.delete(name);
	});

	location.reload();
};

const saveSettings = async () => {
	const profile     = ElementById('profile').value;
	let   clearInputs = false;

	if (profile !== settings.profile) clearInputs = true;

	await modifySettings(settings => {
		settings.combineDateTime = ElementById('combineDateTime').checked;
		settings.showDS100       = ElementById('showDS100').checked;
		settings.showPrices      = ElementById('showPrices').checked;
		settings.language        = ElementById('language').value;
		settings.profile         = profile;
		settings.loyaltyCard     = ElementById('loyaltyCard').value;
		settings.walkingSpeed    = ElementById('walkingSpeed').value;
		settings.ageGroup        = ElementById('ageGroup').value;

		return settings;
	});

	await initHafasClient(settings.profile);
	searchView(clearInputs);
	hideOverlay();
};