---
import LoggedIn from '../../layouts/LoggedIn.astro';
import locationManager from '../../lib/classes/managers/LocationManager';

const allGalaxies = locationManager.galaxies;

let i = 0;
const galaxies = allGalaxies.map(galaxy => {
	return {
		numericId: i++,
		name: galaxy.name,
		style: {
			left: galaxy.coords.x,
			top: galaxy.coords.y,
			color: "white"
		},
		sectors: galaxy.sectors.map(sector => {
			return {
				id: sector._id.toString(),
				name: sector.name
			};
		})
	};
})
---
<LoggedIn id="galaxyView" title="Galaxy view">
	<div class="container">
		<div class="galaxy-container">
			{galaxies.map(galaxy => <>
				<a href="#">
					<div class="galaxy-icon" style={`left: ${galaxy.style.left}px; top: ${galaxy.style.top}px; background-color: ${galaxy.style.color};`}>
						<div class="galaxy-name" data-sectors={JSON.stringify(galaxy.sectors)}>{galaxy.name}</div>
					</div>
				</a>
			</>)}
		</div>
		<div class="galaxy-details">
			<h2></h2>
			<div class="galaxy-sector-list"></div>
		</div>
	</div>
</LoggedIn>
<style is:global>
.container {
	display: flex;
	flex-direction: row;
	color: white;
}

.galaxy-container {
	width: 70%;
	height: 500px;
	background-color: blue;
	margin-left: 50px;
	margin-right: auto;
	margin-top: 50px;
	position: relative;
}

.galaxy-icon {
	position:absolute;
	width: 40px;
	height: 40px;
	background-color: white;
	border-radius: 20px;
}

.galaxy-icon:hover {
	background-color: yellow !important;
}

.galaxy-name {
	position: absolute;
	top: 40px;
	left: -5px;
	color: white;
}

.galaxy-details {
	width: 23%;
	height: 500px;
	margin-top: 50px;
	margin-right: 50px;
}

.galaxy-details h2 {
	text-align: center;
}

.galaxy-sector-list {
	display: flex;
	flex-direction: column;
}

.galaxy-sector-list div {
	text-align: center;
	background-color: gray;
	margin-top: 10px;
	border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
</style>
<script>
	function gvinit() {
		const galaxyIcons = document.querySelectorAll('.galaxy-icon');
		const galaxyDetails = document.querySelector('.galaxy-details');
		const galaxySectorList = document.querySelector('.galaxy-sector-list');

		if(!galaxyIcons) return;
		if(!galaxyDetails) return;
		if(!galaxySectorList) return;

		galaxyIcons.forEach(icon => {
			icon.addEventListener('click', (e) => {
				const galaxy = icon.querySelector('.galaxy-name');
				if(!galaxy) return;

				const sectors: Array<{ id: string, name: string }> = JSON.parse(galaxy.getAttribute('data-sectors') ?? "[]");
				const galaxyNameField = galaxyDetails.querySelector('h2');
				if(!galaxyNameField) return;
				galaxyNameField.innerText = (icon.querySelector('.galaxy-name') as HTMLElement)?.innerText;
				galaxySectorList.innerHTML = "";
				sectors.forEach(sector => {
					const sectorDiv = document.createElement('div');
					sectorDiv.innerText = sector.name;
					sectorDiv.setAttribute('data-id', sector.id);
					galaxySectorList.appendChild(sectorDiv);
				});
			});
		});
	}

	gvinit();
</script>