import { defineComponent as I, ref as g, provide as q, watch as j, openBlock as a, createElementBlock as p, Fragment as H, renderSlot as J, createBlock as x, Teleport as Q, createElementVNode as b, normalizeStyle as D, unref as i, normalizeClass as _, createVNode as O, TransitionGroup as U, withCtx as W, renderList as Y, createCommentVNode as y, toDisplayString as C } from "vue";
import { injectNotificationKey as Z } from "../../composables/keys.js";
import { useColors as A } from "../../composables/useColors.js";
import { useCSS as ee } from "../../composables/useCSS.js";
import { useTheme as te } from "../../composables/useTheme.js";
import { closeIcon as oe } from "../../common/icons.js";
import K from "../icon/Icon.vue.js";
import re from "../spacer/Spacer.js";
const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center flex-wrap" }, le = {
  key: 0,
  class: "font-medium mr-2"
}, ne = ["onClick"], ie = {
  ...A.props("primary"),
  align: {
    type: String,
    default: "right",
    validator: (c) => M.align.includes(c)
  },
  position: {
    type: String,
    default: "bottom",
    validator: (c) => M.position.includes(c)
  },
  timeout: {
    type: Number,
    default: 3500
  },
  removable: {
    type: Boolean,
    default: !0
  },
  pauseOnHover: {
    type: Boolean,
    default: !0
  },
  injectKey: {
    type: [Symbol, String],
    default: Z
  }
}, M = {
  align: ["left", "right"],
  position: ["bottom", "top"]
}, ce = {
  name: "XNotifications",
  validators: M
}, he = /* @__PURE__ */ I({
  ...ce,
  props: ie,
  setup(c, { expose: E }) {
    const r = c, u = g(r.align), s = g(r.position), d = g([]), z = g(null), L = ee("notification"), S = A();
    q(r.injectKey, {
      log: w,
      info: N,
      warn: v,
      error: B,
      warning: v,
      success: T
    }), j(() => r.align, (e) => {
      u.value = e;
    }), j(() => r.position, (e) => {
      s.value = e;
    });
    function w(e) {
      const o = typeof e == "string", t = {
        message: o ? e : void 0
      };
      m(o ? t : {
        ...t,
        ...e
      });
    }
    function N(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 $;
      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 = S.getPalette(t.iconColor), f = S.getPalette((($ = t.action) == null ? void 0 : $.color) || "primary"), V = L.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(V).map((n) => `${n}: ${V[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 R(e) {
      r.pauseOnHover && e.timer && (clearTimeout(e.timer), e.timer = void 0);
    }
    function X(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 { styles: F, classes: k, className: G } = te("Notifications", {}, r);
    return E({ log: w, info: N, success: T, warn: v, warning: v, error: B }), (e, o) => (a(), p(H, null, [
      J(e.$slots, "default"),
      (a(), x(Q, { to: "body" }, [
        b("div", {
          ref_key: "listRef",
          ref: z,
          style: D(i(F)),
          class: _([
            i(G),
            i(k).wrapper,
            {
              // align
              "left-0": u.value === "left",
              "right-0": u.value === "right",
              // position
              "top-0": s.value === "top",
              "bottom-0": s.value === "bottom"
            }
          ])
        }, [
          O(U, {
            tag: "ul",
            class: _([
              i(k).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: W(() => [
              (a(!0), p(H, null, Y(d.value, (t) => (a(), p("li", {
                key: t.id,
                class: _([
                  i(k).item,
                  {
                    "mb-2": s.value === "bottom",
                    "mt-2": s.value === "top"
                  }
                ]),
                style: D(t.style),
                onMouseenter: (l) => R(t),
                onMouseleave: (l) => X(t)
              }, [
                t.icon ? (a(), x(K, {
                  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),
                b("div", ae, [
                  t.title ? (a(), p("span", le, C(t.title), 1)) : y("", !0),
                  b("span", null, C(t.message), 1)
                ]),
                O(i(re)),
                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);
                  }
                }, C(t.action.label), 9, ne)) : y("", !0),
                t.removable ? (a(), x(K, {
                  key: 2,
                  icon: i(oe),
                  class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
                  onClick: () => {
                    h(t);
                  }
                }, null, 8, ["icon", "onClick"])) : y("", !0)
              ], 46, se))), 128))
            ]),
            _: 1
          }, 8, ["class"])
        ], 6)
      ]))
    ], 64));
  }
});
export {
  he as default
};
