import { untrack } from 'svelte';

/**
 * Scrolls the highlighted row of a picker list into view when the scroll
 * trigger is bumped, without scrolling on mouse hover or result
 * replacement.
 */
export interface UseScrollActiveRowOptions {
	/** Counter bumped by keyboard nav; `undefined` disables the effect. */
	getTrigger: () => number | undefined;
	getContainer: () => HTMLDivElement | null;
	getIndex: () => number;
	getCount: () => number;
	/** Full data attribute marking the row, e.g. `data-picker-index`. */
	dataAttr: string;
}

export function useScrollActiveRow(opts: UseScrollActiveRowOptions) {
	let lastTrigger: number | null = null;

	$effect(() => {
		const trigger = opts.getTrigger();

		if (trigger === undefined) return;

		// Skip the initial run on mount: the list opens with the first row
		// already in view, and scrolling here fires before the popover is
		// positioned, which would scroll the whole page to the top.
		if (lastTrigger === null) {
			lastTrigger = trigger;

			return;
		}

		if (trigger === lastTrigger) return;

		lastTrigger = trigger;
		untrack(() => {
			const container = opts.getContainer();
			const index = opts.getIndex();

			if (!container || index < 0 || index >= opts.getCount()) return;

			const row = container.querySelector(`[${opts.dataAttr}="${index}"]`) as HTMLElement | null;

			row?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
		});
	});
}

export type UseScrollActiveRowReturn = ReturnType<typeof useScrollActiveRow>;