import { i as e } from "../../sanitize-CDxuPfMB.js";
import { n as t, t as n } from "../../utils-C_mWfcFX.js";
//#region src/display/notification-center/index.ts
var r = {
	info: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></svg>",
	success: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/></svg>",
	warning: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></svg>",
	error: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></svg>"
};
function i(e) {
	let t = Date.now() - e.getTime(), n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), a = Math.floor(i / 24);
	return n < 60 ? "Just now" : r < 60 ? `${String(r)}m ago` : i < 24 ? `${String(i)}h ago` : a < 7 ? `${String(a)}d ago` : e.toLocaleDateString();
}
var a = class {
	el;
	centerId;
	notifications;
	maxVisible;
	emptyMessage;
	onMarkRead;
	onMarkAllRead;
	onDismiss;
	onClearAll;
	listEl;
	badgeEl;
	emptyEl;
	markAllReadBtn;
	clearAllBtn;
	itemHandlersMap = /* @__PURE__ */ new Map();
	markAllReadHandler;
	clearAllHandler;
	constructor(e) {
		this.centerId = t("cmm-notification-center"), this.notifications = e.notifications ? [...e.notifications] : [], this.maxVisible = e.maxVisible ?? 50, this.emptyMessage = e.emptyMessage ?? "No notifications", this.onMarkRead = e.onMarkRead, this.onMarkAllRead = e.onMarkAllRead, this.onDismiss = e.onDismiss, this.onClearAll = e.onClearAll, this.el = document.createElement("div"), this.el.id = this.centerId, this.el.className = this.buildClassName(e.className), this.el.setAttribute("role", "region"), this.el.setAttribute("aria-label", "Notification center");
		let r = document.createElement("div");
		r.className = "cmm-notification-center__header";
		let i = document.createElement("div");
		i.className = "cmm-notification-center__header-left";
		let a = document.createElement("span");
		a.className = "cmm-notification-center__title", a.textContent = "Notifications", i.appendChild(a), this.badgeEl = document.createElement("span"), this.badgeEl.className = "cmm-notification-center__badge", this.badgeEl.setAttribute("aria-label", "Unread count"), i.appendChild(this.badgeEl), r.appendChild(i);
		let o = document.createElement("div");
		o.className = "cmm-notification-center__actions", this.markAllReadBtn = document.createElement("button"), this.markAllReadBtn.className = "cmm-notification-center__action-btn", this.markAllReadBtn.type = "button", this.markAllReadBtn.textContent = "Mark all read", this.markAllReadHandler = () => {
			this.markAllAsRead();
		}, this.markAllReadBtn.addEventListener("click", this.markAllReadHandler), o.appendChild(this.markAllReadBtn), this.clearAllBtn = document.createElement("button"), this.clearAllBtn.className = "cmm-notification-center__action-btn", this.clearAllBtn.type = "button", this.clearAllBtn.textContent = "Clear all", this.clearAllHandler = () => {
			this.clearAll();
		}, this.clearAllBtn.addEventListener("click", this.clearAllHandler), o.appendChild(this.clearAllBtn), r.appendChild(o), this.el.appendChild(r), this.listEl = document.createElement("div"), this.listEl.className = "cmm-notification-center__list", this.listEl.setAttribute("role", "list"), this.el.appendChild(this.listEl), this.emptyEl = document.createElement("div"), this.emptyEl.className = "cmm-notification-center__empty", this.emptyEl.textContent = this.emptyMessage, this.render(), e.container !== void 0 && n(e.container).appendChild(this.el);
	}
	addNotification(e) {
		for (this.notifications.unshift(e); this.notifications.length > this.maxVisible;) {
			let e = this.notifications.pop();
			e !== void 0 && this.removeItemEl(e.id);
		}
		this.render();
	}
	removeNotification(e) {
		let t = this.notifications.findIndex((t) => t.id === e);
		t !== -1 && this.notifications.splice(t, 1), this.removeItemEl(e), this.render(), this.onDismiss !== void 0 && this.onDismiss(e);
	}
	markAsRead(e) {
		let t = this.notifications.find((t) => t.id === e);
		t !== void 0 && (t.read = !0);
		let n = this.itemHandlersMap.get(e);
		n !== void 0 && n.el.classList.remove("cmm-notification-center__item--unread"), this.updateBadge(), this.onMarkRead !== void 0 && this.onMarkRead(e);
	}
	markAllAsRead() {
		for (let e of this.notifications) e.read = !0;
		for (let [, e] of this.itemHandlersMap) e.el.classList.remove("cmm-notification-center__item--unread");
		this.updateBadge(), this.onMarkAllRead !== void 0 && this.onMarkAllRead();
	}
	clearAll() {
		this.cleanupAllItems(), this.notifications.length = 0, this.render(), this.onClearAll !== void 0 && this.onClearAll();
	}
	getUnreadCount() {
		let e = 0;
		for (let t of this.notifications) t.read !== !0 && (e += 1);
		return e;
	}
	destroy() {
		this.markAllReadBtn.removeEventListener("click", this.markAllReadHandler), this.clearAllBtn.removeEventListener("click", this.clearAllHandler), this.cleanupAllItems(), this.el.remove();
	}
	render() {
		if (this.cleanupAllItems(), this.listEl.textContent = "", this.notifications.length === 0) this.listEl.appendChild(this.emptyEl);
		else {
			let e = this.notifications.slice(0, this.maxVisible);
			for (let t of e) {
				let e = this.createItemEl(t);
				this.listEl.appendChild(e);
			}
		}
		this.updateBadge();
	}
	createItemEl(t) {
		let n = document.createElement("div");
		n.className = "cmm-notification-center__item", n.setAttribute("role", "listitem"), n.dataset.notificationId = t.id, t.read !== !0 && n.classList.add("cmm-notification-center__item--unread");
		let a = {
			el: n,
			dismissHandler: null,
			actionHandler: null,
			dismissBtn: null,
			actionBtn: null
		}, o = t.level ?? "info", s = document.createElement("div");
		s.className = `cmm-notification-center__item-icon cmm-notification-center__item-icon--${o}`, s.setAttribute("aria-hidden", "true"), e(s, t.icon ?? r[o]), n.appendChild(s);
		let c = document.createElement("div");
		c.className = "cmm-notification-center__item-content";
		let l = document.createElement("div");
		if (l.className = "cmm-notification-center__item-title", l.textContent = t.title, c.appendChild(l), t.description !== void 0) {
			let e = document.createElement("div");
			e.className = "cmm-notification-center__item-desc", e.textContent = t.description, e.title = t.description, c.appendChild(e);
		}
		let u = document.createElement("div");
		u.className = "cmm-notification-center__item-time", u.textContent = i(t.timestamp), c.appendChild(u), n.appendChild(c);
		let d = document.createElement("div");
		if (d.className = "cmm-notification-center__item-actions", t.action !== void 0) {
			let e = document.createElement("button");
			e.className = "cmm-notification-center__item-action-btn", e.type = "button", e.textContent = t.action.label;
			let n = t.action.onClick, r = t.id, i = () => {
				n(r);
			};
			e.addEventListener("click", i), a.actionBtn = e, a.actionHandler = i, d.appendChild(e);
		}
		let f = document.createElement("button");
		f.className = "cmm-notification-center__item-dismiss", f.type = "button", f.setAttribute("aria-label", "Dismiss notification"), f.textContent = "×";
		let p = t.id, m = () => {
			this.removeNotification(p);
		};
		return f.addEventListener("click", m), a.dismissBtn = f, a.dismissHandler = m, d.appendChild(f), n.appendChild(d), this.itemHandlersMap.set(t.id, a), n;
	}
	removeItemEl(e) {
		let t = this.itemHandlersMap.get(e);
		t !== void 0 && (t.dismissBtn !== null && t.dismissHandler !== null && t.dismissBtn.removeEventListener("click", t.dismissHandler), t.actionBtn !== null && t.actionHandler !== null && t.actionBtn.removeEventListener("click", t.actionHandler), t.el.remove(), this.itemHandlersMap.delete(e));
	}
	cleanupAllItems() {
		for (let [e, t] of this.itemHandlersMap) t.dismissBtn !== null && t.dismissHandler !== null && t.dismissBtn.removeEventListener("click", t.dismissHandler), t.actionBtn !== null && t.actionHandler !== null && t.actionBtn.removeEventListener("click", t.actionHandler), this.itemHandlersMap.delete(e);
	}
	updateBadge() {
		let e = this.getUnreadCount();
		e > 0 ? (this.badgeEl.textContent = String(e), this.badgeEl.style.display = "", this.badgeEl.setAttribute("aria-label", `${String(e)} unread`)) : (this.badgeEl.textContent = "0", this.badgeEl.style.display = "none");
	}
	buildClassName(e) {
		let t = ["cmm-notification-center"];
		return e && t.push(e), t.join(" ");
	}
};
//#endregion
export { a as NotificationCenter };

//# sourceMappingURL=index.js.map