<script lang="ts">
	import BaseTrack from './BaseTrack.svelte';

	export let feature: {
		tunnelType: 'start' | 'whole' | 'end' | 'mid';
		length: string;
	};

	export let activeElec: any;

	export let reversed: boolean = false;

	const portalColour = '#475569'; // Slate grey

	$: effectiveType = (() => {
		if (!reversed || feature.tunnelType === 'whole' || feature.tunnelType === 'mid')
			return feature.tunnelType;
		return feature.tunnelType === 'start' ? 'end' : 'start';
	})();
</script>

<svg viewBox="0 0 64 64" width="64" height="64" class="tunnel">
	<BaseTrack {activeElec} height={64} />

	<g fill="none" stroke={portalColour} stroke-width="3" stroke-linecap="round">
		{#if effectiveType === 'whole'}
			<path d="M 16 12 Q 32 24 48 12" />
			<path d="M 16 52 Q 32 40 48 52" />
		{:else if effectiveType === 'start'}
			<path d="M 16 12 Q 32 24 48 12" />
		{:else if effectiveType === 'end'}
			<path d="M 16 52 Q 32 40 48 52" />
		{/if}
	</g>

	{#if feature.length}
		<rect x="12" y="26" width="40" height="12" fill="white" />
		<text
			x="32"
			y="35"
			text-anchor="middle"
			font-size="8.5"
			font-weight="bold"
			fill={portalColour}
			class="t-text"
		>
			{feature.length}
		</text>
	{/if}
</svg>

<style>
	svg {
		display: block;
		overflow: visible;
	}
	.t-text {
		font-family: ui-monospace, monospace;
	}
</style>
