import { ref as n, useId as M, provide as S, onMounted as k, createElementBlock as w, openBlock as h, normalizeStyle as _, unref as H, createElementVNode as i, createCommentVNode as C, toDisplayString as E, renderSlot as g } from "vue";
/* empty css                    */
import I from "../../../_virtual/_plugin-vue_export-helper.js";
const X = ["id"], Y = { class: "float-window__container" }, $ = ["src", "alt"], z = { class: "float-window__title" }, D = { style: { "margin-left": "auto", display: "flex" } }, L = {
  __name: "FloatContainer",
  props: {
    title: {
      type: String,
      required: !0
    },
    avatar: {
      type: String,
      required: !0
    },
    height: {
      type: String,
      default: "100%"
    },
    width: {
      type: String,
      default: "100%"
    }
  },
  emits: ["close-window", "get-size"],
  setup(u, { emit: W }) {
    const l = u, t = n({ x: 0, y: 0 }), o = n(null), r = n(null), s = n(!1), d = n(0), c = n(0), f = n(0), v = M();
    S("chatAppId", v);
    const y = (e) => {
      s.value = !0, d.value = e.clientX - o.value.offsetLeft, c.value = e.clientY - o.value.offsetTop;
    }, p = () => s.value = !1, x = (e) => {
      if (s.value) {
        const a = e.clientX - d.value, m = e.clientY - c.value;
        t.value.x = a, t.value.y = m;
      }
    };
    return k(() => {
      document.addEventListener("mousemove", x), window.addEventListener("resize", () => {
        o.value && (t.value.x = Math.max(
          0,
          Math.min(
            t.value.x,
            window.innerWidth - o.value.offsetWidth
          )
        ), t.value.y = Math.max(
          0,
          Math.min(
            t.value.y,
            window.innerHeight - o.value.offsetHeight
          )
        ));
      }), f.value = o.value.offsetHeight - r.value.offsetHeight;
    }), (e, a) => (h(), w("div", {
      id: H(v),
      ref_key: "element",
      ref: o,
      class: "float-window",
      style: _({
        left: t.value.x + "px",
        top: t.value.y + "px",
        userSelect: s.value ? "none" : "auto",
        height: u.height,
        width: u.width,
        display: "flex"
      })
    }, [
      i("div", Y, [
        i("div", {
          ref_key: "container",
          ref: r,
          class: "float-window__controls",
          onMousedown: y,
          onMouseup: p,
          onMouseleave: p
        }, [
          l.avatar ? (h(), w("img", {
            key: 0,
            class: "float-window__avatar",
            src: l.avatar,
            alt: l.title
          }, null, 8, $)) : C("", !0),
          i("p", z, E(l.title), 1),
          i("div", D, [
            g(e.$slots, "controls", {}, void 0, !0),
            i("button", {
              class: "float-window__close-button",
              onClick: a[0] || (a[0] = (m) => e.$emit("close-window"))
            }, [...a[1] || (a[1] = [
              i("span", { class: "pi pi-times" }, null, -1)
            ])])
          ])
        ], 544),
        i("div", {
          class: "float-window__content",
          style: _({ height: f.value + "px" })
        }, [
          g(e.$slots, "default", {}, void 0, !0)
        ], 4)
      ])
    ], 12, X));
  }
}, B = /* @__PURE__ */ I(L, [["__scopeId", "data-v-a219697a"]]);
export {
  B as default
};
