<script lang="ts">
	import { getElecColour } from '$lib/railStyles';
	import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';

	export let feature: {
		direction: 'up' | 'down';
		diverges: 'left' | 'right' | 'both';
		elecBranch?: string;
		goto?: string;
		entryPoint?: string;
	};
	export let activeElec: any;
	export let reversed: boolean = false;

	$: isUp = feature.direction === 'up';
	$: visualUp = reversed ? !isUp : isUp;
	$: visualSide = (side: 'left' | 'right') => {
		if (!reversed) return side;
		return side === 'left' ? 'right' : 'left';
	};

	const getPath = (side: 'left' | 'right') => {
		const yStart = visualUp ? 64 : 8;
		const yEnd = visualUp ? 8 : 56;
		const xEnd = side === 'right' ? 56 : 8;
		return `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
	};

	$: paths = (() => {
		if (feature.diverges === 'both') return [getPath('left'), getPath('right')];
		const effectiveSide = visualSide(feature.diverges as 'left' | 'right');
		return [getPath(effectiveSide)];
	})();

	$: branchColour = getElecColour(feature.elecBranch || activeElec);
</script>

<svg viewBox="0 0 64 64" width="64" height="64" class="junction">
	{#each paths as d (d)}
		<path {d} fill="none" stroke={branchColour} stroke-width="5" stroke-linecap="round" />
	{/each}
	<BaseTrack {activeElec} height={64} />
</svg>

<style>
	svg {
		display: block;
		overflow: visible;
	}
</style>
