import { defineComponent as V, ref as S, computed as z, unref as o, watchEffect as X, openBlock as g, createElementBlock as b, normalizeClass as d, normalizeStyle as Y, createCommentVNode as h, createElementVNode as x, createBlock as F, resolveDynamicComponent as A, createVNode as k } from "vue";
import { UpOutlined as G, DownOutlined as K, LeftOutlined as R, RightOutlined as $ } from "@ant-design/icons-vue";
import "../config-provider/index.mjs";
import { useNamespace as j } from "../config-provider/hooks/use-namespace.mjs";
const q = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], H = 300, _ = /* @__PURE__ */ V({
  name: "SplitBar",
  __name: "SplitBar",
  props: {
    index: {},
    active: {
      type: Boolean
    },
    resizable: {
      type: Boolean
    },
    startCollapsible: {
      type: Boolean
    },
    endCollapsible: {
      type: Boolean
    },
    onOffsetStart: {
      type: Function
    },
    onOffsetUpdate: {
      type: Function
    },
    onOffsetEnd: {},
    onCollapse: {
      type: Function
    },
    vertical: {
      type: Boolean
    },
    ariaNow: {},
    ariaMin: {},
    ariaMax: {},
    lazy: {
      type: Boolean
    },
    containerSize: {},
    draggerIcon: {},
    collapsibleIcon: {},
    showStartCollapsibleIcon: {
      type: [Boolean, String]
    },
    showEndCollapsibleIcon: {
      type: [Boolean, String]
    },
    onDraggerDoubleClick: {
      type: Function
    }
  },
  setup(s) {
    function C(e) {
      return typeof e == "number" && !Number.isNaN(e) && Number.isFinite(e) ? Math.round(e) : 0;
    }
    const t = s, {
      b: a,
      cssVar: L
    } = j("splitter-bar");
    let E = 0;
    const w = S(null), u = S(0), N = z(() => t.vertical ? 0 : o(u)), D = z(() => t.vertical ? o(u) : 0), P = (e) => {
      e.stopPropagation();
      const n = Date.now(), l = n - E;
      l > 0 && l < H || (E = n, t.resizable && e.currentTarget && (w.value = [e.pageX, e.pageY], t.onOffsetStart(t.index)));
    }, T = (e) => {
      if (t.resizable && e.touches.length === 1) {
        const n = e.touches[0];
        w.value = [n.pageX, n.pageY], t.onOffsetStart(t.index);
      }
    }, U = (e) => {
      const {
        containerSize: n,
        ariaMax: l,
        ariaMin: r,
        ariaNow: c
      } = t, i = n * c / 100, f = i + e, m = Math.max(0, n * r / 100), p = Math.max(n, n * l / 100);
      return Math.max(m, Math.min(p, f)) - i;
    }, O = (e, n) => {
      const l = U(t.vertical ? n : e);
      u.value = l;
    }, M = () => {
      t.onOffsetUpdate(t.index, o(N), o(D)), u.value = 0;
    }, I = (e) => {
      switch (e) {
        case !0:
          return a("collapse-bar-always-visible");
        case !1:
          return a("collapse-bar-always-hidden");
        case "auto":
          return a("collapse-bar-hover-only");
      }
    };
    X((e) => {
      const n = o(w);
      if (n) {
        const l = (f) => {
          const {
            pageX: m,
            pageY: p
          } = f, v = m - n[0], B = p - n[1];
          t.lazy ? O(v, B) : t.onOffsetUpdate(t.index, v, B);
        }, r = () => {
          t.lazy && M(), w.value = null, t.onOffsetEnd();
        }, c = (f) => {
          if (f.touches.length === 1) {
            const m = f.touches[0], p = m.pageX - n[0], v = m.pageY - n[1];
            t.lazy ? O(p, v) : t.onOffsetUpdate(t.index, p, v);
          }
        }, i = () => {
          t.lazy && M(), w.value = null, t.onOffsetEnd();
        };
        window.addEventListener("touchmove", c), window.addEventListener("touchend", i), window.addEventListener("mousemove", l), window.addEventListener("mouseup", r), e(() => {
          window.removeEventListener("touchmove", c), window.removeEventListener("touchend", i), window.removeEventListener("mousemove", l), window.removeEventListener("mouseup", r);
        });
      }
    }, {
      flush: "post"
    });
    const y = z(() => {
      const {
        collapsibleIcon: e,
        vertical: n
      } = t;
      let l = null, r = null;
      const c = e?.start !== void 0, i = e?.end !== void 0;
      return n ? (l = c ? () => e.start : G, r = i ? () => e.end : K) : (l = c ? () => e.start : R, r = i ? () => e.end : $), {
        startIcon: l,
        endIcon: r,
        startCustomize: c,
        endCustomize: i
      };
    });
    return (e, n) => (g(), b("div", {
      class: d(o(a)()),
      role: "separator",
      "aria-valuenow": C(t.ariaNow),
      "aria-valuemin": C(t.ariaMin),
      "aria-valuemax": C(t.ariaMax)
    }, [t.lazy ? (g(), b("div", {
      key: 0,
      class: d([o(a)("preview"), {
        [o(a)("preview-active")]: !!u.value
      }]),
      style: Y(o(L)({
        "preview-offset": `${u.value}px`
      }))
    }, null, 6)) : h("", !0), x("div", {
      class: d([o(a)("dragger"), {
        [o(a)("dragger-disabled")]: !s.resizable,
        [o(a)("dragger-active")]: s.active,
        [o(a)("dragger-customize")]: s.draggerIcon !== void 0
      }]),
      onMousedown: P,
      onTouchstart: T,
      onDblclick: n[0] || (n[0] = () => s.onDraggerDoubleClick?.(s.index))
    }, [s.draggerIcon !== void 0 ? (g(), b("div", {
      key: 0,
      class: d(o(a)("dragger-icon"))
    }, [(g(), F(A(s.draggerIcon)))], 2)) : h("", !0)], 34), s.startCollapsible ? (g(), b("div", {
      key: 1,
      class: d([o(a)("collapse-bar"), o(a)("collapse-bar-start"), y.value.startCustomize ? o(a)("collapse-bar-customize") : "", I(s.showStartCollapsibleIcon)]),
      onClick: n[1] || (n[1] = () => s.onCollapse(s.index, "start"))
    }, [x("span", {
      class: d([o(a)("collapse-icon"), o(a)("collapse-start")])
    }, [k(o(y).startIcon)], 2)], 2)) : h("", !0), s.endCollapsible ? (g(), b("div", {
      key: 2,
      class: d([o(a)("collapse-bar"), o(a)("collapse-bar-end"), y.value.endCustomize ? o(a)("collapse-bar-customize") : "", I(s.showEndCollapsibleIcon)]),
      onClick: n[2] || (n[2] = () => s.onCollapse(s.index, "end"))
    }, [x("span", {
      class: d([o(a)("collapse-icon"), o(a)("collapse-end")])
    }, [k(o(y).endIcon)], 2)], 2)) : h("", !0)], 10, q));
  }
});
export {
  _ as default
};
