import settings from '$stores/settings';
import { get } from 'svelte/store';

export const nbsp = (str: string) => str.replace(/ /g, ' ');

export const limitListHeight = () => {
	if (get(settings).displayLimitListHeight) {
		let tallestList: HTMLElement | undefined;

		document.querySelectorAll('.list').forEach((list) => {
			const element = list as HTMLElement;

			element.style.height = 'auto';

			if (element.offsetHeight > (tallestList ? tallestList.offsetHeight : 0))
				tallestList = element;
		});

		if (tallestList)
			tallestList.style.maxHeight = `calc(${window.innerHeight}px - ${
				document.querySelector('#header')?.getBoundingClientRect().bottom || 0
			}px - 4rem)`;
	}
};

export const createHeightObserver = () => {
	const observer = new ResizeObserver(() => limitListHeight());

	document.querySelectorAll('#list-container').forEach((element) => {
		observer.observe(element);
	});
};