import { css as u, LitElement as y, html as f } from "lit";
import { property as p, state as k } from "lit/decorators.js";
import { updateWhenLocaleChanges as v, msg as c } from "@lit/localize";
import { importMdIconButtonSafely as w, importMdIconSafely as T, importMdMenuItemSafely as b, customElementSafe as S } from "./custom-element-safe.js";
var D = Object.defineProperty, g = Object.getOwnPropertyDescriptor, E = (e) => {
  throw TypeError(e);
}, l = (e, t, a, o) => {
  for (var i = o > 1 ? void 0 : o ? g(t, a) : t, h = e.length - 1, m; h >= 0; h--)
    (m = e[h]) && (i = (o ? m(t, a, i) : m(i)) || i);
  return o && i && D(t, a, i), i;
}, C = (e, t, a) => t.has(e) || E("Cannot " + a), M = (e, t, a) => t.has(e) ? E("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), n = (e, t, a) => (C(e, t, "access private method"), a), r, d, _;
w();
T();
b();
let s = class extends y {
  constructor() {
    super(), M(this, r), this.variant = "button", this.control = "theme-toggle", this._theme = { isDark: !1, scale: 1, followSystemTheme: !0 }, v(this);
  }
  connectedCallback() {
    super.connectedCallback(), this._theme = s.loadTheme(), window.addEventListener(s.THEME_CHANGED_EVENT, n(this, r, d).bind(this));
  }
  disconnectedCallback() {
    window.removeEventListener(s.THEME_CHANGED_EVENT, n(this, r, d).bind(this)), super.disconnectedCallback();
  }
  render() {
    let e = "", t = "";
    switch (this.control) {
      case "theme-toggle":
        e = this._theme.isDark ? "light_mode" : "dark_mode", t = this._theme.isDark ? c("Switch to Light mode", { id: "polyfea.switch-to-light-theme" }) : c("Switch to Dark mode", { id: "polyfea.switch-to-dark-theme" });
        break;
      case "text-increase":
        e = "text_increase", t = c("Increase text size", { id: "polyfea.increase-text-size" });
        break;
      case "text-decrease":
        e = "text_decrease", t = c("Decrease text size", { id: "polyfea.decrease-text-size" });
        break;
      case "reset-font":
        e = "text_format", t = c("Reset text size", { id: "polyfea.reset-text-size" });
        break;
    }
    if (this.variant === "button")
      return f`
        <md-icon-button @click=${n(this, r, _)} title=${t} aria-label=${t}>
          <md-icon>${e}</md-icon>
        </md-icon-button>
      `;
    if (this.variant === "menu-item")
      return f`
        <md-menu-item @click=${n(this, r, _)}>
          <md-icon slot="start">${e}</md-icon>
          <div slot="headline">${t}</div>
        </md-menu-item>
      `;
  }
  static loadTheme() {
    try {
      const a = localStorage.getItem(s._THEME_STORAGE_KEY);
      if (a) {
        let o = JSON.parse(a);
        if ((o.followSystemTheme || o.followSystemTheme === void 0) && window.matchMedia) {
          const i = window.matchMedia("(prefers-color-scheme: dark)");
          o.isDark = i.matches;
        }
        return Object.assign({ scale: 1, followSystemTheme: !0 }, o);
      }
    } catch {
    }
    return { isDark: window.matchMedia("(prefers-color-scheme: dark)").matches, scale: 1, followSystemTheme: !0 };
  }
};
r = /* @__PURE__ */ new WeakSet();
d = function(e) {
  const t = e;
  (this._theme.isDark !== t.detail?.isDark || this._theme.scale !== (t.detail?.scale || 1)) && (this._theme = { ...t.detail });
};
_ = function() {
  let e = Object.assign({}, this._theme);
  switch (this.control) {
    case "theme-toggle":
      e.isDark = !e.isDark, e.followSystemTheme = !1;
      break;
    case "text-increase":
      e.scale = (e.scale || 1) * 1.2;
      break;
    case "text-decrease":
      (e.scale || 1) > 0.01 && (e.scale = (e.scale || 1) * (1 / 1.2));
      break;
    case "reset-font":
      e.scale = 1;
      break;
  }
  (this._theme.isDark != e.isDark || this._theme.scale != e.scale) && (localStorage.setItem(s._THEME_STORAGE_KEY, JSON.stringify(e)), this._theme = e, this.dispatchEvent(
    new CustomEvent(s.THEME_CHANGED_EVENT, {
      detail: e,
      bubbles: !0,
      composed: !0
    })
  ));
};
s.THEME_CHANGED_EVENT = "polyfea-theme-changed";
s._THEME_STORAGE_KEY = "@polyfea/theme";
s.styles = u`
    :host {
      display: contents;
    }
  `;
l([
  p()
], s.prototype, "variant", 2);
l([
  p()
], s.prototype, "control", 2);
l([
  k()
], s.prototype, "_theme", 2);
s = l([
  S("polyfea-md-theme-control")
], s);
export {
  s as PolyfeaMdThemeControl
};
