import { fetchJourneys } from './api.js';
import { attachLocationsSearch } from './locations-search.js';
import { addJourneyToDraftingBoard } from './drafting-board.js';

let element_journeys_search = document.querySelector("#journeys-search");
let element_from = document.querySelector("#journey-search-from");
let element_to = document.querySelector("#journey-search-to");
let element_submit = document.querySelector("#journey-search-submit");
let element_result = document.querySelector("#journey-search-result");

export function setupJourneysSearch() {
	attachLocationsSearch(element_from);
	attachLocationsSearch(element_to);

	element_submit.addEventListener("click", event => {
		element_result.innerText = "Loading…";
		fetchJourneys(element_from.dataset.locationId, element_to.dataset.locationId).then(result => {
			for (let journey of result.journeys) {
				element_result.appendChild(createJourneyElement(journey));
			}
		});
	});
}

function createJourneyElement(journey) {
	let el = document.createElement("div");

	for (let leg of journey.legs) {
		el.appendChild(createJourneyLegElement(leg));
	}

	el.addEventListener("click", event => {
		addJourneyToDraftingBoard(journey);
	});

	return el;

}

function createJourneyLegElement(leg) {
	let el = document.createElement("div");
	el.innerText = JSON.stringify(leg);
	el.innerText = leg?.line?.name + ": " + leg.origin.name + " > " + leg.destination.name;
	return el;
}


export function attachJourneysSearch(search_element) {
	search_element.addEventListener("click", event => {
		element_from.value = "";
		element_to.value = "";
		element_result.innerText = "";
		element_journeys_search.style.display = "block";
	});
}