import { writable } from "svelte/store";

export default (
  sizes = { phone: 0, tablet: 768, desktop: 1024, xxl: 1749 },
) => {
  const defaultValue = { name: null, width: null, nodeWidth: null, rect: null };
  const { subscribe, unsubscribe, set } = writable(defaultValue);

  let ro = null;
  let node = null;

  const unobserve = () => {
    if (!node) return;

    ro.unobserve(node);

    node = null;
  };

  const observe = (nodeToObserve) => {
    if (!nodeToObserve) return null;

    if (node) unobserve();

    node = nodeToObserve;

    let lastWidth = null;

    ro = new ResizeObserver(() => {
      const rect = node.getBoundingClientRect();
      const nodeWidth = rect.width;
      if (lastWidth === nodeWidth) return;

      lastWidth = nodeWidth;

      set(
        Object.entries(sizes)
          .sort((a, b) => a[1] - b[1])
          .reduce(
            (cum, item) =>
              item[1] <= nodeWidth
                ? { name: item[0], width: item[1], nodeWidth, rect }
                : cum,
            defaultValue,
          ),
      );
    });

    ro.observe(node);

    return node;
  };

  return {
    subscribe,
    unsubscribe,
    observe,
    unobserve,
  };
};