import { dataStorage } from './app.js';
import { showModal } from './overlays.js';
import { hideDiv, ElementById } from './helpers.js';
import { saveDataStorage, clearDataStorage, ConsoleLog, t, loadDS100 } from './app_functions.js';
import { html, render } from './lit-html.js';
import { searchView } from './searchView.js';

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

const settingsTemplate = () => html`
  <div id="settingsView">
		<b>${t('options')}:</b><br>
		<label><input type="checkbox" ?checked=${dataStorage.settings.showRIL100Names} id="ril100"> ${t('showds100')}</label><br>
		<label><input type="checkbox" ?checked=${dataStorage.settings.writeDebugLog} id="debug-messages"> ${t('showdebug')}</label><br>
		<label><input type="checkbox" ?checked=${dataStorage.settings.enableCanvas} id="enable-canvas"> ${t('graphical')} <b>BETA</b></label><br>
		<label><input type="checkbox" ?checked=${dataStorage.settings.travelynx} id="travelynx"> ${t('travelynx-checkin')}<label><br>
		<label><input type="checkbox" ?checked=${dataStorage.settings.advancedSelection} id="advancedSelection">ADVANCED® selection of trains<label><br>
		<br>
		<b>${t('language')}:</b><br>
		<label><input type="radio" name="language" ?checked=${dataStorage.settings.language === "de"} value="de"> ${t('de')}</label><br>
		<label><input type="radio" name="language" ?checked=${dataStorage.settings.language === "en"} value="en"> ${t('en')}</label><br>
	
		<button id="clear" @click=${clearDataStorage}><span>${t('clearstorage')}</span></button>
		<button id="save" @click=${saveSettings}><span>${t('save')}</span></button>

		<button id="quit" style="float:right;" @click=${newAll}><span>Quit Sibelius</span></button>
	</div>
`;

const rebuildCache = () => {
	ConsoleLog('sw update');
	registration.update();
	location.reload();
};

const newAll = () => {
	ElementById('clear').innerText = "New All";
};

const saveSettings  = async () => {
	const language          = document.querySelector('input[name="language"]:checked').value;
	const show_ril100       = ElementById('ril100').checked;
	const write_debug       = ElementById('debug-messages').checked;
	const enable_canvas     = ElementById('enable-canvas').checked;
	const travelynx         = ElementById('travelynx').checked;
	const advancedSelection = ElementById('advancedSelection').checked;

	dataStorage.settings.showRIL100Names   = show_ril100;
	dataStorage.settings.writeDebugLog     = write_debug;
	dataStorage.settings.enableCanvas      = enable_canvas;
	dataStorage.settings.language          = language;
	dataStorage.settings.travelynx         = travelynx;
	dataStorage.settings.advancedSelection = advancedSelection;

	saveDataStorage();
	if (show_ril100) await loadDS100();
	searchView();
	hideDiv('overlay');
};