import { defineComponent as q, ref as g, provide as J, watch as D, computed as Q, openBlock as a, createElementBlock as p, Fragment as O, renderSlot as U, createBlock as x, Teleport as W, createElementVNode as k, normalizeStyle as _, unref as i, normalizeClass as C, createVNode as K, TransitionGroup as Y, withCtx as Z, renderList as ee, createCommentVNode as y, toDisplayString as M } from "vue";
import { injectNotificationKey as te } from "../../composables/keys.js";
import { useColors as E } from "../../composables/useColors.js";
import { useCSS as oe } from "../../composables/useCSS.js";
import { useTheme as re } from "../../composables/useTheme.js";
import { closeIcon as se } from "../../common/icons.js";
import A from "../icon/Icon.vue.js";
import ae from "../spacer/Spacer.js";
const le = ["onMouseenter", "onMouseleave"], ne = { class: "flex items-center flex-wrap" }, ie = {
  key: 0,
  class: "font-medium mr-2"
}, ce = ["onClick"], ue = {
  ...E.props("primary"),
  align: {
    type: String,
    default: "right",
    validator: (c) => S.align.includes(c)
  },
  position: {
    type: String,
    default: "bottom",
    validator: (c) => S.position.includes(c)
  },
  timeout: {
    type: Number,
    default: 3500
  },
  removable: {
    type: Boolean,
    default: !0
  },
  pauseOnHover: {
    type: Boolean,
    default: !0
  },
  injectKey: {
    type: [Symbol, String],
    default: te
  },
  offset: {
    type: [String, Number],
    default: 0
  }
}, S = {
  align: ["left", "right"],
  position: ["bottom", "top"]
}, me = {
  name: "XNotifications",
  validators: S
}, xe = /* @__PURE__ */ q({
  ...me,
  props: ue,
  setup(c, { expose: L }) {
    const r = c, u = g(r.align), s = g(r.position), d = g([]), z = g(null), R = oe("notification"), w = E();
    J(r.injectKey, {
      log: N,
      info: $,
      warn: v,
      error: B,
      warning: v,
      success: T
    }), D(() => r.align, (e) => {
      u.value = e;
    }), D(() => r.position, (e) => {
      s.value = e;
    });
    function N(e) {
      const o = typeof e == "string", t = {
        message: o ? e : void 0
      };
      m(o ? t : {
        ...t,
        ...e
      });
    }
    function $(e) {
      const o = typeof e == "string", t = {
        icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />',
        iconColor: "sky",
        message: o ? e : void 0
      };
      m(o ? t : {
        ...t,
        ...e
      });
    }
    function T(e) {
      const o = typeof e == "string", t = {
        icon: '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />',
        iconColor: "success",
        message: o ? e : void 0
      };
      m(o ? t : {
        ...t,
        ...e
      });
    }
    function v(e) {
      const o = typeof e == "string", t = {
        icon: '<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
        iconColor: "warning",
        message: o ? e : void 0
      };
      m(o ? t : {
        ...t,
        ...e
      });
    }
    function B(e) {
      const o = typeof e == "string", t = {
        icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
        iconColor: "error",
        message: o ? e : void 0
      };
      m(o ? t : {
        ...t,
        ...e
      });
    }
    function m(e) {
      var H;
      const t = {
        ...{
          id: Date.now(),
          iconColor: r.color,
          timeout: r.timeout,
          align: u.value,
          position: s.value,
          removable: r.removable
        },
        ...e
      };
      u.value = t.align, s.value = t.position;
      const l = w.getPalette(t.iconColor), f = w.getPalette(((H = t.action) == null ? void 0 : H.color) || "primary"), j = R.variables({
        icon: l[400],
        action: f[400],
        hover: {
          action: f[500]
        },
        dark: {
          icon: l[500],
          action: f[500],
          hover: {
            action: f[600]
          }
        }
      });
      if (t.style = Object.keys(j).map((n) => `${n}: ${j[n]}`).join(";"), t.timeout) {
        const n = P(t, t.timeout);
        t.timer = n, t.timerStart = Date.now();
      }
      d.value.push(t), setTimeout(() => {
        var n;
        (n = z.value) == null || n.scrollTo({ top: 0, behavior: "smooth" });
      }, 0);
    }
    function h(e) {
      d.value = d.value.filter((o) => o.id !== e.id);
    }
    function P(e, o) {
      return setTimeout(() => {
        h(e);
      }, o);
    }
    function X(e) {
      r.pauseOnHover && e.timer && (clearTimeout(e.timer), e.timer = void 0);
    }
    function F(e) {
      if (r.pauseOnHover && e.timeout && e.timerStart) {
        const o = Math.max(e.timeout - (Date.now() - e.timerStart), 1e3);
        e.timer = P(e, o);
      }
    }
    const V = Q(() => `${r.offset}px`), { styles: G, classes: b, className: I } = re("Notifications", {}, r);
    return L({ log: N, info: $, success: T, warn: v, warning: v, error: B }), (e, o) => (a(), p(O, null, [
      U(e.$slots, "default"),
      (a(), x(W, { to: "body" }, [
        k("div", {
          ref_key: "listRef",
          ref: z,
          style: _(i(G)),
          class: C([
            i(I),
            i(b).wrapper,
            {
              // align
              "left-0": u.value === "left",
              "right-0": u.value === "right",
              // position
              "top-0": s.value === "top",
              "bottom-0": s.value === "bottom"
            }
          ])
        }, [
          K(Y, {
            tag: "ul",
            style: _([
              s.value === "bottom" ? `padding-bottom: ${V.value};` : `padding-top: ${V.value};`
            ]),
            class: C([
              i(b).list,
              { "flex-col-reverse": s.value }
            ]),
            "enter-active-class": "transition ease-out duration-200",
            "leave-active-class": "transition ease-out duration-100",
            "enter-from-class": "transform translate-y-2 opacity-0",
            "enter-to-class": "transform translate-y-0 opacity-100",
            "leave-from-class": "transform translate-y-0 opacity-100",
            "leave-to-class": "transform translate-y-2 opacity-0",
            "move-class": "ease-in-out duration-200"
          }, {
            default: Z(() => [
              (a(!0), p(O, null, ee(d.value, (t) => (a(), p("li", {
                key: t.id,
                class: C([
                  i(b).item,
                  {
                    "mb-2": s.value === "bottom",
                    "mt-2": s.value === "top"
                  }
                ]),
                style: _(t.style),
                onMouseenter: (l) => X(t),
                onMouseleave: (l) => F(t)
              }, [
                t.icon ? (a(), x(A, {
                  key: 0,
                  filled: "",
                  icon: t.icon,
                  class: "mr-4 text-[color:var(--x-notification-icon)] dark:text-[color:var(--x-notification-dark-icon)]",
                  viewBox: "0 0 20 20"
                }, null, 8, ["icon"])) : y("", !0),
                k("div", ne, [
                  t.title ? (a(), p("span", ie, M(t.title), 1)) : y("", !0),
                  k("span", null, M(t.message), 1)
                ]),
                K(i(ae)),
                t.action ? (a(), p("button", {
                  key: 1,
                  type: "button",
                  class: "ml-3 font-medium cursor-pointer text-[color:var(--x-notification-action)] hover:text-[color:var(--x-notification-action-hover)] dark:text-[color:var(--x-notification-dark-action)] dark:hover:text-[color:var(--x-notification-dark-action-hover)]",
                  onClick: () => {
                    var l;
                    (l = t.action) == null || l.onClick(), h(t);
                  }
                }, M(t.action.label), 9, ce)) : y("", !0),
                t.removable ? (a(), x(A, {
                  key: 2,
                  icon: i(se),
                  class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
                  onClick: () => {
                    h(t);
                  }
                }, null, 8, ["icon", "onClick"])) : y("", !0)
              ], 46, le))), 128))
            ]),
            _: 1
          }, 8, ["style", "class"])
        ], 6)
      ]))
    ], 64));
  }
});
export {
  xe as default
};
