<script lang="ts">
	import type { Paragraph, Sentence, SentenceToken } from './Transcript';

	interface Props {
		paragraphs: Paragraph[];
		activeSentenceIdx: number;
		selectedSentenceToken: SentenceToken | null;
		onWordClick: (token: SentenceToken, sentence: Sentence) => void;
		lang: string;
	}

	const { paragraphs, activeSentenceIdx, selectedSentenceToken, onWordClick, lang }: Props =
		$props();
</script>

<div class="article-body" {lang}>
	{#each paragraphs as para (para.index)}
		<p class="paragraph">
			{#each para.sentences as sentence (sentence.idx)}
				<span class="sentence" class:sentence--active={activeSentenceIdx === sentence.idx}>
					{#each sentence.tokens as token (token.idx)}
						{#if !token.is_punct}
							<button
								class="word"
								class:word--selected={selectedSentenceToken?.idx === token.idx}
								onclick={() => onWordClick(token, sentence)}
							>
								{token.text}
							</button>
						{:else}
							{token.text}
						{/if}
					{/each}
				</span>
			{/each}
		</p>
	{/each}
</div>

<style>
	.article-body {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		font-family: var(--font-body);
	}

	.paragraph {
		font-family: var(--font-body);
		font-size: var(--text-body-xl);
		line-height: 2;
		color: var(--color-on-surface);
	}

	/* Sentence: highlighted when audio is at that point */
	.sentence {
		border-radius: var(--radius-xs);
		transition: background-color var(--duration-normal) var(--ease-standard);
	}

	.sentence--active {
		background-color: var(--color-primary-container);
	}

	/* --- Word buttons --- */
	.word {
		display: inline;
		background: none;
		border: none;
		padding: 0 0.1em;
		margin: 0;
		font: inherit;
		color: inherit;
		cursor: pointer;
		border-radius: var(--radius-xs);
		transition:
			background-color var(--duration-fast) var(--ease-standard),
			color var(--duration-fast) var(--ease-standard);
	}

	.word:hover {
		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
		color: var(--color-primary);
	}

	.word--selected {
		background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
		color: var(--color-primary);
		font-weight: var(--weight-medium);
	}
</style>
