import { useResizeObserver as w } from "@vueuse/core";
import { ref as P, computed as o, watch as v, unref as R } from "vue";
const h = { xs: 0, sm: 768, md: 1280, lg: 1728 };
function z(r) {
  return Object.entries(r).sort((s, n) => n[1] - s[1]);
}
const p = (r, s) => {
  const n = P(0), c = o(() => {
    const { resize: e, resizeTarget: t } = r;
    return e?.target ? e.target === "document" ? document.documentElement : e.target === "form" ? s.value?.$el : e.target : t ?? document.documentElement;
  }), i = o(() => {
    const e = r.resize?.breakPoint ?? h;
    return z(e);
  });
  v(
    () => c.value,
    (e, t, m) => {
      const u = typeof e == "string" ? document.querySelector(e) : e;
      if (!u)
        return;
      const { stop: d } = w(u, (f) => {
        const l = f[0], { width: g } = l.contentRect;
        n.value = g;
      });
      m(() => {
        d();
      });
    },
    { flush: "post", immediate: !0 }
  );
  const a = o(() => {
    for (const [e, t] of i.value)
      if (R(n) > t)
        return e;
    return "md";
  });
  return o(() => {
    const e = r.countPerRow, t = {
      xs: e - 2,
      sm: e - 1,
      md: e,
      lg: e + 1
    };
    return Math.max(1, t[a.value]);
  });
};
export {
  p as useCountPerRow
};
