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

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

export const createHeightObserver = (details = true) => {
	const heightObserver = new ResizeObserver(() => {
		if (get(settings).displayLimitListHeight) {
			document.querySelectorAll('.list').forEach((list) => {
				const element = list as HTMLElement;

				element.style.height = 'auto';

				const elementBound = element.getBoundingClientRect();
				const height = window.innerHeight - elementBound.top - 2.5 * 16;

				if (elementBound.height > height) element.style.height = `${height}px`;
			});
		}
	});
	const collapseObserver = new MutationObserver(() => {
		document.querySelectorAll('.list').forEach((list) => {
			const element = list as HTMLDetailsElement;

			if (element.tagName === 'DETAILS' && !element.open) element.style.height = 'auto';
		});
	});

	document.querySelectorAll('.list').forEach((element) => heightObserver.observe(element));

	if (details)
		document
			.querySelectorAll('.list')
			.forEach((element) => collapseObserver.observe(element, { attributes: true }));
};