import { defineComponent as X, ref as a, watchEffect as j, watch as K, computed as v, onMounted as M, openBlock as y, createBlock as O, Teleport as q, createVNode as w, Transition as F, withCtx as g, withDirectives as G, createElementVNode as k, normalizeClass as $, unref as n, createElementBlock as H, createCommentVNode as x, normalizeStyle as I, renderSlot as f, vShow as J } from "vue";
import { useBreakpoints as Q, breakpointsTailwind as U, useEventListener as S, useSwipe as W } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
import { useTheme as Y } from "../../composables/useTheme.js";
import Z from "../scroll/Scroll.vue.js";
const ee = {
  key: 0,
  ref: "swipeRef",
  class: "flex flex-col max-h-full"
}, te = ["left", "right", "top", "bottom"], oe = {
  modelValue: Boolean,
  position: {
    type: String,
    default: "left"
  },
  teleportTo: {
    type: [String, Object],
    default: "body"
  },
  width: {
    type: [String, Number],
    default: 220
  },
  height: {
    type: [String, Number],
    default: 320
  },
  breakpoint: [String, Number],
  backdrop: {
    type: Boolean,
    default: !0
  }
}, ie = {
  name: "XDrawer",
  inheritAttrs: !1,
  validators: {
    position: te
  }
}, pe = /* @__PURE__ */ X({
  ...ie,
  props: oe,
  emits: ["update:modelValue"],
  setup(E, { expose: L, emit: B }) {
    const t = E, u = B, i = a(!0), s = a(t.modelValue), r = a(null), d = a(null), c = a(!1), h = typeof t.breakpoint == "string", p = Q(h ? U : { md: t.breakpoint || 768 }).smaller(h ? t.breakpoint : "md");
    j(() => {
      t.breakpoint && (p.value ? (i.value = !0, l()) : (i.value = !1, m()));
    }), S(r, "pointerdown", l), K(() => t.modelValue, (e) => {
      s.value = e;
    }), typeof window < "u" && S(document, "keydown", T);
    function T(e) {
      e.key === "Escape" && s.value && l();
    }
    W(d, {
      // passive: false,
      // onSwipe(e: TouchEvent) {
      //   if (lengthX.value < 0) {
      //     const length = Math.abs(lengthX.value)
      //     left.value = `${length}px`
      //   } else {
      //     left.value = '0'
      //   }
      // },
      // onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
      //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
      //     left.value = '100%'
      //   } else {
      //     left.value = '0'
      //   }
      // },
      onSwipeEnd(e, o) {
        i.value && (t.position === "left" && o === "left" || t.position === "right" && o === "right" || t.position === "top" && o === "up" || t.position === "bottom" && o === "down") && l();
      }
    });
    const V = v(() => {
      const e = {};
      return t.position === "left" || t.position === "right" ? e.width = `${t.width}px` : (t.position === "top" || t.position === "bottom") && (e.height = `${t.height}px`), e;
    }), N = v(() => {
      const e = [];
      return i.value && (e.push("absolute shadow-lg"), t.position === "top" ? e.push("top-0 inset-x-0") : t.position === "bottom" ? e.push("bottom-0 inset-x-0") : t.position === "left" ? e.push("left-0 inset-y-0") : t.position === "right" && e.push("right-0 inset-y-0")), e;
    });
    function _(e) {
      e.classList.add("inset-0"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
    }
    function C(e, o) {
      if (!i.value) {
        o();
        return;
      }
      e.addEventListener("transitionend", o), setTimeout(() => {
        t.backdrop && e.classList.add("bg-slate-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
      }, 1);
    }
    function R(e) {
    }
    function D(e, o) {
      e.addEventListener("transitionend", o), setTimeout(() => {
        t.backdrop && e.classList.remove("bg-slate-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
      }, 1);
    }
    function z(e) {
      e.classList.remove("inset-0");
    }
    function l(e) {
      e && e.target !== r.value || (s.value = !1, u("update:modelValue", !1));
    }
    function m() {
      s.value = !0, u("update:modelValue", !0);
    }
    M(() => {
      c.value = !0;
    });
    const { styles: A, classes: b, className: P } = Y("Drawer", {}, t);
    return L({ open: m, close: l }), (e, o) => c.value ? (y(), O(q, {
      key: 0,
      to: e.teleportTo,
      disabled: !i.value
    }, [
      w(F, {
        css: !1,
        onBeforeEnter: _,
        onEnter: C,
        onBeforeLeave: R,
        onLeave: D,
        onAfterLeave: z
      }, {
        default: g(() => [
          G(k("div", {
            ref_key: "backdropRef",
            ref: r,
            class: $([
              e.$attrs.class,
              n(b).backdrop,
              i.value || !e.breakpoint ? "absolute z-40" : ""
            ])
          }, [
            i.value && s.value ? (y(), H("div", ee, null, 512)) : x("", !0),
            k("div", {
              ref_key: "drawerRef",
              ref: d,
              class: $([
                n(P),
                N.value,
                n(b).wrapper
              ]),
              style: I([V.value, n(A)])
            }, [
              f(e.$slots, "header"),
              w(Z, {
                scrollbar: !1,
                vertical: "",
                class: "flex-1"
              }, {
                default: g(() => [
                  f(e.$slots, "default")
                ]),
                _: 3
              }),
              f(e.$slots, "footer")
            ], 6)
          ], 2), [
            [J, e.breakpoint ? s.value && n(p) || !n(p) : s.value]
          ])
        ]),
        _: 3
      })
    ], 8, ["to", "disabled"])) : x("", !0);
  }
});
export {
  pe as default
};
