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

	/*
	 * A stacked pull request, no words: the pull page's commit list, an "all changes" row
	 * over the stack, each commit its change id, subject and diff stat, on the range rail.
	 * The rows rise in; then the selection narrows from the whole stack to one change and
	 * back, the interdiff the pull page lets you take.
	 */
	const commits = [
		{ subject: "w-44", add: "w-6", del: "w-4" },
		{ subject: "w-56", add: "w-8", del: "w-5" },
		{ subject: "w-36", add: "w-5", del: "" },
		{ subject: "w-48", add: "w-5", del: "w-3" }
	];
</script>

<Reveal items=".all, .commit" class="stack">
	<div class="all">
		<span class="dot"></span>
		<span class="bar strong w-20"></span>
		<span class="stat"><span class="add w-8"></span><span class="del w-6"></span></span>
	</div>
	<div class="commits">
		<span class="rail" aria-hidden="true"><span class="selection"></span></span>
		{#each commits as commit, i (i)}
			<div class="commit">
				<span class="dot"></span>
				<span class="bar id w-14"></span>
				<span class={["bar strong", commit.subject]}></span>
				<span class="stat">
					<span class={["add", commit.add]}></span>
					{#if commit.del}<span class={["del", commit.del]}></span>{/if}
				</span>
			</div>
		{/each}
	</div>
</Reveal>

<style>
	:global(.stack) {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.5rem;
		border-radius: var(--radius-md, 0.375rem);
		background: var(--color-background-default);
		box-shadow: 0 0 0 1px var(--color-border-default);
	}
	.all,
	.commit {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		height: 2.5rem;
		padding: 0 0.75rem;
	}
	.all {
		border-radius: var(--radius-md, 0.375rem);
		background: var(--color-background-subtle);
		box-shadow: 0 0 0 1px var(--color-border-default);
	}
	.commits {
		position: relative;
		padding-top: 0.5rem;
		border-top: 1px solid var(--color-border-default);
	}

	/* the range rail down the dots, and the selection on it */
	.rail {
		position: absolute;
		top: 0.5rem;
		bottom: 0;
		left: 0.5rem;
		width: 1.25rem;
		border-radius: 999px;
		background: var(--color-background-subtle);
		box-shadow: inset 0 0 0 1px var(--color-border-default);
	}
	.selection {
		position: absolute;
		inset: 0.125rem;
		border-radius: 999px;
		box-shadow: inset 0 0 0 1.5px var(--color-background-info-emphasis);
	}
	.dot {
		position: relative;
		flex: none;
		width: 0.5rem;
		height: 0.5rem;
		margin-left: 0.125rem;
		border-radius: 50%;
		background: var(--color-foreground-subtle);
	}

	.bar {
		display: block;
		height: 0.5rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--color-foreground-default) 22%, transparent);
	}
	.bar.strong {
		height: 0.625rem;
		background: color-mix(in srgb, var(--color-foreground-default) 28%, transparent);
	}
	.bar.id {
		background: color-mix(in srgb, var(--color-foreground-default) 14%, transparent);
	}

	/* the diff stat pill: green insertions, red deletions */
	.stat {
		display: flex;
		margin-left: auto;
		overflow: clip;
		border-radius: var(--radius-md, 0.375rem);
	}
	.add,
	.del {
		display: block;
		height: 1.125rem;
	}
	.add {
		background: var(--color-background-success-subtle);
		box-shadow: inset 0 -0.3125rem 0 -0.0625rem var(--color-background-success-subtle),
			inset 0 0.3125rem 0 -0.0625rem var(--color-background-success-subtle);
		background-image: linear-gradient(var(--color-foreground-success), var(--color-foreground-success));
		background-size: 60% 0.25rem;
		background-position: center;
		background-repeat: no-repeat;
	}
	.del {
		background: var(--color-background-danger-subtle);
		background-image: linear-gradient(var(--color-foreground-danger), var(--color-foreground-danger));
		background-size: 60% 0.25rem;
		background-position: center;
		background-repeat: no-repeat;
	}

	/* once the rows are in, the selection narrows to the second change and comes back */
	:global(.reveal.playing) .selection {
		animation: narrow 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both;
	}
	@keyframes narrow {
		0%,
		100% {
			inset: 0.125rem;
		}
		35%,
		65% {
			inset: 2.625rem 0.125rem calc(100% - 5.125rem);
		}
	}
</style>