<script lang="ts">
	interface Props {
		frame: number;
		fps: number;
	}

	let { frame, fps }: Props = $props();
</script>

<div class="scale" style="--frame: {frame}; --fps: {fps}">
	<div class="labels">
		<div>Video Late</div>
		<div>Audio Late</div>
	</div>
	<div class="zero">
		<div class="label">0</div>
		<div class="mark"></div>
	</div>
	<div class="indicator"></div>
	<div class="ticks">
		<div class="tick"></div>
		{#each Array.from({ length: fps }, (_, i) => i) as i}
			<div class="spacer" class:active={i === (frame + fps / 2) % fps}>
				{#if i % (fps / 10) === 0 && i !== 0 && i !== fps / 2}
					<div class="label">{(i - fps / 2) * (1000 / fps)}ms</div>
				{/if}
			</div>
			<div class="tick"></div>
		{/each}
	</div>
	<div class="axis"></div>
</div>

<style>
	.scale {
		position: relative;
	}

	.labels {
		position: absolute;
		top: -3vw;
		width: 100%;
		display: flex;
		font-size: 2vw;
	}

	.labels > div {
		flex-grow: 1;
		text-align: center;
	}

	.axis {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);

		width: 100%;
		background: white;
		height: 2px;
	}

	.ticks {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		& .spacer {
			position: relative;
			flex-grow: 1;

			&.active {
				background: var(--color-active);
				z-index: 9;
			}

			& .label {
				position: absolute;
				top: calc(100% + 2em);
				left: 50%;
				transform: translateX(-50%) rotate(90deg);

				line-height: 1;
				font-size: 13px;
			}
		}

		& .tick {
			width: 2px;
			height: 5vh;
			background: white;
		}
	}

	.zero {
		position: absolute;
		top: calc(50% - 5vh * 2.5 / 2);
		left: calc(50%);
		width: calc(100% / var(--fps) - 1px);
		font-size: 2vw;

		& .label {
			position: absolute;
			top: -1.2em;
			color: transparent;
		}

		& .mark {
			width: 2px;
			height: calc(5vh * 2.5);
			background: white;
			position: absolute;
			top: 0;
			left: 50%;
		}
	}
</style>
