import { computed, onMounted, ref } from "vue";
import { useElementSize, useMutationObserver } from "@vueuse/core";

export function useElementsOffset(selectors: string[]) {
  const elRefs = selectors.map(() => ref<HTMLElement | null>(null));
  const sizes = elRefs.map((el) => useElementSize(el, undefined, { box: "border-box" }));

  const resolveElements = () => {
    selectors.forEach((selector, i) => {
      elRefs[i].value = document.querySelector<HTMLElement>(selector);
    });
  };

  onMounted(resolveElements);
  useMutationObserver(document.body, resolveElements, {
    childList: true,
    subtree: true,
  });

  return computed(() => sizes.reduce((total, { height }) => total + height.value, 0));
}