import { defineComponent as fe, toRefs as _e, ref as C, reactive as we, onMounted as ye, onUnmounted as he, createVNode as l, resolveComponent as c, withModifiers as _, Fragment as ee, isVNode as ke } from "vue";
import { ElIcon as ge, ElTooltip as Ce } from "element-plus";
import { useResolveVnode as p, useGetCompRefProps as ze } from "@klweb/compose-app-engine";
import { debounce as xe } from "@klweb/utils";
import { C as Ee, u as qe, A as k, d as Ie, e as Te, f as be, D as Me, g as R, h as Se, i as $e } from "./main-DXvReGBc.js";
import { e as De } from "./index-ClGUov3E.js";
function Ne(i) {
  const n = i.toUpperCase();
  return Ee[n];
}
const Pe = "_hover_1viqq_7", Re = "_other_1viqq_11", z = {
  "kl-comp-pick-view": "_kl-comp-pick-view_1viqq_1",
  hover: Pe,
  other: Re,
  "pick-view-handle-area": "_pick-view-handle-area_1viqq_15",
  "handle-area-icons": "_handle-area-icons_1viqq_33",
  "pick-view-drag-mark": "_pick-view-drag-mark_1viqq_68",
  "e-resize": "_e-resize_1viqq_81",
  "w-resize": "_w-resize_1viqq_81",
  "n-resize": "_n-resize_1viqq_92",
  "s-resize": "_s-resize_1viqq_92",
  "ne-resize": "_ne-resize_1viqq_97",
  "nw-resize": "_nw-resize_1viqq_97",
  "se-resize": "_se-resize_1viqq_100",
  "sw-resize": "_sw-resize_1viqq_100"
}, {
  IconDrag: Xe,
  IconSelectParent: te,
  IconEditMetadata: Ye,
  IconUp: oe,
  IconDown: le,
  IconDel: ne,
  IconMoreFilled: Fe
} = De;
function v(i) {
  return typeof i == "function" || Object.prototype.toString.call(i) === "[object Object]" && !ke(i);
}
const He = /* @__PURE__ */ fe({
  name: "KlCompPickView",
  components: {
    ElIcon: ge,
    ElTooltip: Ce
  },
  props: {
    eventType: {
      type: Number,
      default: 1
    },
    compNode: {
      type: Object,
      default: () => ({})
    },
    className: {
      type: String,
      default: ""
    },
    style: {
      type: Object,
      default: () => ({})
    }
  },
  setup(i) {
    const {
      compNode: n
    } = _e(i), M = C({}), s = C({}), se = i.eventType === 1 ? n.value.type === "page" : !1, T = i.eventType === 1 ? qe(n.value.compId) : "", w = C(), ae = we(["n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "se-resize", "nw-resize", "sw-resize"]), b = C(!1), S = C(!1);
    let X, x, u;
    const Y = C("static");
    let m, f, F, L, r, d;
    const V = () => {
      if (i.eventType === 1 || i.eventType === 3) {
        const e = window.innerWidth;
        if (w.value) {
          const {
            width: a,
            x: t
          } = w.value.getBoundingClientRect();
          a + t > e ? (w.value.style.left = "auto", w.value.style.right = 0, w.value.style.borderRadius = "0 0 0 4px") : (w.value.style.left = "", w.value.style.right = "", w.value.style.borderRadius = "");
        }
      }
    }, O = xe(V, 100), ie = () => {
      window.parent.__useUpdateCompMetadata__ && window.parent.__useUpdateCompMetadata__(n.value);
    }, ce = () => {
      window.parent.__useRemoveCompNodeById__ && window.parent.__useRemoveCompNodeById__(n.value.compId);
    }, ue = () => {
      u = document.querySelector(`[comp-id="${n.value.compId}"]`), Y.value = u ? getComputedStyle(u).position : "static", x = u ? u.parentElement : null;
    }, A = async () => {
      M.value = x ? getComputedStyle(x) : {};
      const e = n.value.styles ? null : await ze(n.value.compId), a = (e == null ? void 0 : e.styles) || {};
      n.value.styles = $e(n.value.styles ?? a), s.value = n.value.styles;
    }, re = (e, a) => {
      const t = window.parent.document.querySelector(".kl-editor-main-iframe");
      if (!t) return;
      const {
        x: o,
        y: E
      } = t.getBoundingClientRect(), g = be(Me[7]) || "100%", q = e.clientX * parseFloat(g) / 100 + o, I = e.clientY * parseFloat(g) / 100 + E;
      window.parent.__useContextMenu__(q, I, a);
    }, y = () => {
      const {
        display: e
      } = M.value;
      delete s.value.flexGrow, delete s.value.flex, delete s.value.flexBasis, e != null && e.startsWith("flex") ? s.value.flexShrink = 0 : delete s.value.flexShrink;
    }, de = (e) => {
      R(!1), e.preventDefault(), A(), F = u ? u.offsetLeft : 0, L = u ? u.offsetTop : 0, r = e.clientX, d = e.clientY, document.addEventListener("mousemove", B, !0), document.addEventListener("mouseup", $);
    }, B = (e) => {
      if (e.preventDefault(), S.value = !0, u) {
        const a = e.clientX - r + F, t = e.clientY - d + L;
        s.value.left = `${a}px`, s.value.top = `${t}px`;
      }
    }, pe = (e, a) => {
      R(!1), e.preventDefault(), A();
      const {
        width: t,
        height: o
      } = s.value;
      X = a, m = u ? u.offsetWidth : parseFloat(t) >= 0 ? parseFloat(t) : 0, f = u ? u.offsetHeight : parseFloat(o) >= 0 ? parseFloat(o) : 0, r = e.clientX, d = e.clientY, document.addEventListener("mousemove", W, !0), document.addEventListener("mouseup", $);
    }, W = (e) => {
      e.preventDefault(), b.value = !0;
      const {
        flexDirection: a
      } = M.value;
      if (u) {
        let t, o;
        switch (X) {
          case "n-resize":
            o = e.clientY > d ? f - (e.clientY - d) : f + (d - e.clientY), s.value.height = `${o < 0 ? 0 : o}px`, a === "column" && y();
            break;
          case "s-resize":
            o = e.clientY - d + f, s.value.height = `${o < 0 ? 0 : o}px`, a === "column" && y();
            break;
          case "e-resize":
            t = e.clientX - r + m, s.value.width = `${t < 0 ? 0 : t}px`, (!a || a === "row") && y();
            break;
          case "w-resize":
            t = e.clientX > r ? m - (e.clientX - r) : m + (r - e.clientX), s.value.width = `${t < 0 ? 0 : t}px`, (!a || a === "row") && y();
            break;
          case "ne-resize":
            t = e.clientX - r + m, o = e.clientY > d ? f - (e.clientY - d) : f + (d - e.clientY), s.value.width = `${t < 0 ? 0 : t}px`, s.value.height = `${o < 0 ? 0 : o}px`, y();
            break;
          case "se-resize":
            t = e.clientX - r + m, o = e.clientY - d + f, s.value.width = `${t < 0 ? 0 : t}px`, s.value.height = `${o < 0 ? 0 : o}px`, y();
            break;
          case "nw-resize":
            t = e.clientX > r ? m - (e.clientX - r) : m + (r - e.clientX), o = e.clientY > d ? f - (e.clientY - d) : f + (d - e.clientY), s.value.width = `${t < 0 ? 0 : t}px`, s.value.height = `${o < 0 ? 0 : o}px`, y();
            break;
          case "sw-resize":
            t = e.clientX > r ? m - (e.clientX - r) : m + (r - e.clientX), o = e.clientY - d + f, s.value.width = `${t < 0 ? 0 : t}px`, s.value.height = `${o < 0 ? 0 : o}px`, y();
            break;
        }
      }
    }, $ = () => {
      b.value = !1, S.value = !1, document.removeEventListener("mousemove", B, !0), document.removeEventListener("mousemove", W, !0), document.removeEventListener("mouseup", $), R(!0);
    };
    return ye(() => {
      V(), i.eventType === 1 && (ue(), window.addEventListener("resize", O));
    }), he(() => {
      window.removeEventListener("resize", O);
    }), () => {
      var H, U, j, G, K, J, Q, Z;
      let e, a, t, o, E, g, q, I, D, N, P;
      return l("div", {
        class: [z["kl-comp-pick-view"], z[i.className]],
        style: i.style
      }, [(i.eventType === 1 || i.eventType === 3) && l("section", {
        ref: w,
        class: z["pick-view-handle-area"]
      }, [l("span", {
        class: "undrag"
      }, [Ne(n.value.type)]), l("span", {
        class: z["handle-area-icons"]
      }, [["absolute", "fixed"].includes(Y.value) && l(c("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "auto-close": 600,
        content: k.DRAG_POSITION
      }, {
        default: () => [l(c("el-icon"), {
          style: "cursor: move",
          onClick: _(() => {
          }, ["stop"]),
          onMousedown: _(de, ["stop"])
        }, v(e = p(Xe)) ? e : {
          default: () => [e]
        })]
      }), b.value || S.value ? l("span", null, [b.value ? `W: ${((U = (H = n.value) == null ? void 0 : H.styles) == null ? void 0 : U.width) ?? "-"}, H: ${((G = (j = n.value) == null ? void 0 : j.styles) == null ? void 0 : G.height) ?? "-"}` : `X: ${((J = (K = n.value) == null ? void 0 : K.styles) == null ? void 0 : J.left) ?? "-"}, Y: ${((Z = (Q = n.value) == null ? void 0 : Q.styles) == null ? void 0 : Z.top) ?? "-"}`]) : l(ee, null, [l(c("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "auto-close": 600,
        content: k.EDIT_METADATA
      }, {
        default: () => [l(c("el-icon"), {
          class: "undrag",
          onClick: _(ie, ["stop"])
        }, v(a = p(Ye)) ? a : {
          default: () => [a]
        })]
      }), se ? l(c("el-icon"), {
        class: "undrag disabled"
      }, v(t = p(te)) ? t : {
        default: () => [t]
      }) : l(c("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "auto-close": 600,
        content: k.SELECT_PARENT
      }, {
        default: () => [l(c("el-icon"), {
          class: "undrag",
          onClick: _(() => {
            const h = x ? x.getAttribute("comp-id") : "";
            h && Se(h);
          }, ["stop"])
        }, v(o = p(te, {
          style: {
            opacity: 0.75
          }
        })) ? o : {
          default: () => [o]
        })]
      }), T === "one" || T === "first" ? l(c("el-icon"), {
        class: "undrag disabled"
      }, v(E = p(oe)) ? E : {
        default: () => [E]
      }) : l(c("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "auto-close": 600,
        content: k.SORT_PREV
      }, {
        default: () => [l(c("el-icon"), {
          class: "undrag",
          onClick: _(() => Ie(n.value.compId), ["stop"])
        }, v(g = p(oe)) ? g : {
          default: () => [g]
        })]
      }), T === "one" || T === "last" ? l(c("el-icon"), {
        class: "undrag disabled"
      }, v(q = p(le)) ? q : {
        default: () => [q]
      }) : l(c("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "auto-close": 600,
        content: k.SORT_NEXT
      }, {
        default: () => [l(c("el-icon"), {
          class: "undrag",
          onClick: _(() => Te(n.value.compId), ["stop"])
        }, v(I = p(le)) ? I : {
          default: () => [I]
        })]
      }), n.value.type === "page" || i.eventType === 3 ? l(c("el-icon"), {
        class: "undrag disabled"
      }, v(D = p(ne)) ? D : {
        default: () => [D]
      }) : l(c("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "auto-close": 600,
        content: k.REMOVE
      }, {
        default: () => [l(c("el-icon"), {
          class: "undrag",
          onClick: _(ce, ["stop"])
        }, v(N = p(ne)) ? N : {
          default: () => [N]
        })]
      }), l(c("el-tooltip"), {
        effect: "dark",
        placement: "top",
        "auto-close": 600,
        content: k.MORE
      }, {
        default: () => [l(c("el-icon"), {
          class: "undrag",
          onClick: _((h) => re(h, n.value), ["stop"])
        }, v(P = p(Fe)) ? P : {
          default: () => [P]
        })]
      })])])]), l(ee, null, [i.eventType === 1 && ae.map((h, ve) => l("mark", {
        key: ve,
        class: [z["pick-view-drag-mark"], z[`${h}`]],
        onClick: _(() => {
        }, ["stop"]),
        onMousedown: _((me) => pe(me, h), ["stop"])
      }, null))])]);
    };
  }
});
export {
  He as default
};
