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