import { ACCENT_PALETTES as e, COLOR_MODES as t, THEME_PRESETS as n, findActivePresetId as r, getTheme as i, setThemeFull as a } from "../../services/theme-engine/index.js";
//#region src/components/theme/theme-preset-grid.ts
function o(n) {
	let r = e[n.theme.accent], i = t[n.theme.mode], a = document.createElement("div");
	a.className = "theme-studio-preset__art", a.style.background = i.swatch[1];
	let o = document.createElement("div");
	o.className = "theme-studio-preset__art-bar", o.style.background = i.swatch[0], o.style.borderColor = i.swatch[2];
	let s = document.createElement("span");
	s.className = "theme-studio-preset__art-dot", s.style.background = r.brand, o.appendChild(s);
	for (let e = 0; e < 2; e++) {
		let e = document.createElement("span");
		e.className = "theme-studio-preset__art-line", o.appendChild(e);
	}
	a.appendChild(o);
	let c = document.createElement("div");
	c.className = "theme-studio-preset__art-card", c.style.background = i.swatch[2], c.style.borderColor = "rgba(255,255,255,0.10)";
	let l = document.createElement("span");
	l.className = "theme-studio-preset__art-pill", l.style.background = r.soft, l.style.color = r.brand, l.style.borderColor = r.brand, l.textContent = n.label.split(" ")[0] ?? n.label, c.appendChild(l);
	let u = document.createElement("span");
	u.className = "theme-studio-preset__art-bars";
	let d = [
		"70%",
		"46%",
		"60%"
	], f = [
		r.brand,
		"rgba(255,255,255,0.30)",
		"rgba(255,255,255,0.20)"
	];
	for (let e = 0; e < 3; e++) {
		let t = document.createElement("i");
		t.style.background = f[e] ?? "rgba(255,255,255,0.20)", t.style.width = d[e] ?? "60%", u.appendChild(t);
	}
	return c.appendChild(u), a.appendChild(c), a;
}
var s = class {
	el;
	constructor() {
		this.el = document.createElement("div"), this.el.className = "theme-studio-presets", this.render(), document.addEventListener("cm:theme-change", () => this.updateActive());
	}
	render() {
		this.el.innerHTML = "";
		let e = r(i());
		for (let t of n) {
			let n = document.createElement("button");
			n.type = "button", n.className = "theme-studio-preset", n.dataset.presetId = t.id, e === t.id && n.classList.add("is-active"), n.setAttribute("aria-pressed", String(e === t.id)), n.setAttribute("aria-label", `Apply ${t.label} preset`), n.appendChild(o(t));
			let r = document.createElement("div");
			r.className = "theme-studio-preset__name", r.textContent = t.label, n.appendChild(r);
			let i = document.createElement("div");
			i.className = "theme-studio-preset__desc", i.textContent = t.description, n.appendChild(i), n.addEventListener("click", () => {
				a({
					...t.theme,
					iconOverrides: {}
				});
			}), this.el.appendChild(n);
		}
	}
	updateActive() {
		let e = r(i()), t = this.el.querySelectorAll(".theme-studio-preset");
		for (let n of t) {
			let t = n.dataset.presetId === e;
			n.classList.toggle("is-active", t), n.setAttribute("aria-pressed", String(t));
		}
	}
};
//#endregion
export { s as ThemePresetGrid };

//# sourceMappingURL=theme-preset-grid.js.map