import { EL } from "./dom.js";
import { displayTripDetails } from "./trip-details.js";
import { drawDraftingBoard } from './drafting-board.js';

let element_leg_details = document.querySelector("#leg-details");
let element_response = document.querySelector("#leg-details-response");

export function displayLegDetails(trip_id, origin_location_id, destination_location_id) {

	let trip = window.dataStore.trips.data[trip_id];
	let origin_location = window.dataStore.locations.data[origin_location_id];
	let destination_location = window.dataStore.locations.data[destination_location_id];

	element_response.innerText = "";

	let el_headline = EL("h1", {});
	el_headline.innerText = trip.line.name + ": " + origin_location.name + " -> " + destination_location.name;
	element_response.appendChild(el_headline);

	let el_display_trip = EL("div", {});
	el_display_trip.innerText = "Display full trip";
	el_display_trip.on("click", event => {
		displayTripDetails(trip_id);
	});
	element_response.appendChild(el_display_trip);

	let el_remove_leg = EL("div", {});
	el_remove_leg.innerText = "Remove leg";
	el_remove_leg.on("click", event => {
		window.dataStore.legs.forget(trip_id, origin_location_id, destination_location_id);
		drawDraftingBoard();
		element_leg_details.popupHide();
	});
	element_response.appendChild(el_remove_leg);

	element_leg_details.popupShow();
}