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

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

export const createHeightObserver = (details = true) => {
  document.querySelectorAll('.list').forEach((element) => {
    if (
      !(
        element as unknown as {
          dataset: { observed: string };
        }
      ).dataset.observed
    ) {
      new ResizeObserver((entries) => {
        entries.forEach((entry) => {
          const element = entry.target as HTMLElement;

          if (get(settings).displayLimitListHeight) {
            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`;
          }
        });
      }).observe(element);

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

            if (element.tagName === 'DETAILS' && !element.open) element.style.height = 'auto';
          });
        }).observe(element, { attributes: true });

      element.setAttribute('data-observed', 'true');
    }
  });
};