import { EL } from "./dom.js";

let element_board = document.querySelector("#drafting-board-content");

export function addJourneyToDraftingBoard(journey) {
	element_board.innerText = "";

	let station_offset = 0;
	let trip_offset = 1;

	let first_station = true;

	for (let leg of journey.legs) {
		if (first_station) {
			let el_origin_name = EL("div", {
				class: [ "station-name" ],
				style: {
					"grid-column-start": 1,
					"grid-column-end": 4,
					"grid-row-start": 1,
					"grid-row-end": 1,

				},
			});
			el_origin_name.innerText = leg.origin.name;
			element_board.appendChild(el_origin_name);

			let el_origin_column = EL("div", {
				class: [ "station-column" ],
				style: {
					"grid-column-start": 2,
					"grid-column-end": 3,
					"grid-row-start": 2,
					"grid-row-end": journey.legs.length + 2,

				},
			});
			element_board.appendChild(el_origin_column);

			first_station = false;
		}

		let el_destination_name = EL("div", {
			class: [ "station-name" ],
			style: {
				"grid-column-start": (station_offset * 3) + 4,
				"grid-column-end": (station_offset * 3) + 7,
				"grid-row-start": 1,
				"grid-row-end": 1,

			},
		});
		el_destination_name.innerText = leg.destination.name;
		element_board.appendChild(el_destination_name);

		let el_destination_column = EL("div", {
			class: [ "station-column" ],
			style: {
				"grid-column-start": (station_offset * 3) + 5,
				"grid-column-end": (station_offset * 3) + 6,
				"grid-row-start": 2,
				"grid-row-end": journey.legs.length + 2,

			},
		});
		element_board.appendChild(el_destination_column);

		let el_trip_left = EL("div", {
			class: [ "trip-left" ],
			style: {
				"grid-column-start": (station_offset * 3) + 1,
				"grid-column-end": (station_offset * 3) + 2,
				"grid-row-start": (trip_offset) + 1,
				"grid-row-end": (trip_offset) + 1,

			},
		});
		el_trip_left.appendChild(document.createTextNode(new Date(leg.departure).toLocaleTimeString()));
		el_trip_left.appendChild(EL("br", {}));
		el_trip_left.appendChild(document.createTextNode("Gleis " + leg.departurePlatform));
		element_board.appendChild(el_trip_left);

		let el_trip = EL("div", {
			class: [ "trip" ],
			style: {
				"grid-column-start": (station_offset * 3) + 3,
				"grid-column-end": (station_offset * 3) + 5,
				"grid-row-start": (trip_offset) + 1,
				"grid-row-end": (trip_offset) + 1,

			},
		});
		el_trip.innerText = leg?.line?.name;
		element_board.appendChild(el_trip);

		let el_trip_right = EL("div", {
			class: [ "trip-right" ],
			style: {
				"grid-column-start": (station_offset * 3) + 6,
				"grid-column-end": (station_offset * 3) + 7,
				"grid-row-start": (trip_offset) + 1,
				"grid-row-end": (trip_offset) + 1,

			},
		});
		el_trip_right.appendChild(document.createTextNode(new Date(leg.arrival).toLocaleTimeString()));
		el_trip_right.appendChild(EL("br", {}));
		el_trip_right.appendChild(document.createTextNode("Gleis " + leg.arrivalPlatform));

		element_board.appendChild(el_trip_right);

		station_offset += 1;
		trip_offset += 1;
	}
}