'use strict';

import { registerLoaderOnLinks, ElementById, showDiv, hideDiv, showLoader, showModal, showAlertModal, hideOverlay } from './helpers.js';
import { html, render } from './lit-html.js';


export const loadSuggestions = async (mode) => {
	const result = await fetch('/suggestions?query=' + encodeURI(document.getElementById(mode).value)).then(resp => resp.json());

	if (result.status !== "success")  return false;

	render(html`
		<div class="suggestionsbox" @mouseover=${() => mouseOverSuggestions(mode)} @mouseout=${() => stopMouseOverSuggestions(mode)}>
		${result.data.map(element => html`
			<p class="suggestion" @click=${() => setSuggestion(mode, element)}>${element}</p>
		`)}</div>`, ElementById(mode + 'Suggestions'));
};

export const setSuggestion = (mode, value) => {
	ElementById(mode).value = value;
	ElementById(mode + 'Suggestions').classList.remove('mouseover');
	ElementById(mode + 'Suggestions').classList.remove('typing');

	if (mode !== 'to') {
		ElementById('to').focus();
	}
};

const startTyping = (mode) => {
	ElementById(mode + 'Suggestions').classList.add('typing');
	ElementById(mode + 'Suggestions').classList.remove('mouseover');
};

const stopTyping = (mode) => {
	ElementById(mode + 'Suggestions').classList.remove('typing');
};

export const mouseOverSuggestions = (mode) => {
	ElementById(mode + 'Suggestions').classList.add('mouseover');
};

export const stopMouseOverSuggestions = (mode) => {
	ElementById(mode + 'Suggestions').classList.remove('mouseover');
};

const onKeypress = (e, mode) => {
	if (e.keyCode == 13) { // enter
		document.querySelector(`#${mode}Suggestions>.suggestionsbox>:first-child`).click();
		if (mode === 'to') {
			if (ElementById("from").value !== "" && ElementById("to").value !== "") {
				ElementById('go').click();
				showLoader();
			}
		}
		e.preventDefault();
		return false;
	}
	return true;
};

const swapFromTo  = () => {

	let from = ElementById('from');
	let to   = ElementById('to');

	from.value = [to.value, to.value = from.value][0];
};


const registerSearchInput = (id) => {
	const el = ElementById(id);
	el.addEventListener('keyup', () => loadSuggestions(id));
	el.addEventListener('focus', () => startTyping(id));
	el.addEventListener('blur', () => stopTyping(id));
	el.addEventListener('keypress', (evt) => onKeypress(evt, id));
};

const registerSwapButton = () => {
	const el = ElementById('btn-swap');
	el.classList.remove('hidden');
	el.addEventListener('click', () => swapFromTo());
}

const registerHistoryButton = () => {
	/*const el = ElementById('btn-history');
	el.classList.remove('hidden');
	el.addEventListener('click', () => showModal("History", html`
	`));*/
}


registerSearchInput('from');
registerSearchInput('to');

registerSwapButton();
registerLoaderOnLinks();

ElementById('go').addEventListener('click', () => {
	if (ElementById("from").value !== "" && ElementById("to").value !== "") {
		showLoader();
	}
});

window.onbeforeunload = function(e) {
	hideOverlay();
}

window.onpageshow = function(event) {
    if (event.persisted) {
        hideOverlay();
    }
};