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

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

export const createHeightObserver = (details = true) => {
	const observedElements = new Set<HTMLElement>();
	const resizeObservers = new Map<HTMLElement, ResizeObserver>();
	const detailObservers = new Map<HTMLElement, MutationObserver>();

	const applyHeightLimit = (target: HTMLElement) => {
		if (!get(settings).displayLimitListHeight) {
			target.style.height = "auto";

			return;
		}

		target.style.height = "auto";

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

		if (elementBound.height > height) target.style.height = `${height}px`;
	};

	const observeElement = (element: HTMLElement) => {
		if (element.dataset.observed) return;

		const resizeObserver = new ResizeObserver((entries) => {
			entries.forEach((entry) => {
				const target = entry.target as HTMLElement;

				applyHeightLimit(target);
			});
		});

		resizeObserver.observe(element);
		resizeObservers.set(element, resizeObserver);

		if (details) {
			const detailsObserver = new MutationObserver((mutations) => {
				mutations.forEach((mutation) => {
					const target = mutation.target as HTMLDetailsElement;

					if (target.tagName === "DETAILS" && !target.open)
						target.style.height = "auto";
				});
			});

			detailsObserver.observe(element, { attributes: true });
			detailObservers.set(element, detailsObserver);
		}

		element.dataset.observed = "true";

		observedElements.add(element);
		applyHeightLimit(element);
	};

	document.querySelectorAll<HTMLElement>(".list").forEach(observeElement);

	const mutationObserver = new MutationObserver((mutations) => {
		mutations.forEach((mutation) => {
			mutation.addedNodes.forEach((node) => {
				if (!(node instanceof HTMLElement)) return;

				if (node.matches(".list")) observeElement(node);

				node.querySelectorAll<HTMLElement>(".list").forEach(observeElement);
			});
		});
	});

	mutationObserver.observe(document.body, { childList: true, subtree: true });

	const unsubscribeSettings = settings.subscribe(() => {
		observedElements.forEach((element) => {
			applyHeightLimit(element);
		});
	});

	return () => {
		unsubscribeSettings();
		mutationObserver.disconnect();
		resizeObservers.forEach((observer) => {
			observer.disconnect();
		});
		detailObservers.forEach((observer) => {
			observer.disconnect();
		});

		observedElements.forEach((element) => {
			element.style.height = "auto";

			delete element.dataset.observed;
		});
	};
};