<script lang="ts">
import * as m from '$lib/paraglide/messages.js';

let { description }: { description?: string | null } = $props();

let expanded = $state(false);
let clamped = $state(false);
let noteEl: HTMLElement | undefined = $state();

$effect(() => {
	if (noteEl) {
		clamped = noteEl.scrollHeight > noteEl.clientHeight;
	}
});

function toggle() {
	expanded = !expanded;
}

const hasContent = $derived(!!description && description.trim().length > 0);
</script>

{#if hasContent}
	<div class="mt-1">
		<p
			data-testid="event-note"
			bind:this={noteEl}
			class="font-sans text-xs whitespace-pre-line text-ink-2"
			style={expanded
				? 'white-space:pre-line'
				: 'white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3'}
		>
			{description}
		</p>
		{#if clamped || expanded}
			<button
				data-testid="note-toggle"
				type="button"
				class="mt-0.5 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
				aria-expanded={expanded ? 'true' : 'false'}
				onclick={toggle}
			>
				{expanded ? m.timeline_note_show_less() : m.timeline_note_show_more()}
			</button>
		{/if}
	</div>
{/if}
