import { computed } from "vue";
import { useState } from "#app";
function n(e) {
  try {
    let t = (e ?? globalThis.localStorage)?.getItem(`theme`);
    if (t === `light` || t === `dark`) return t;
  } catch {}
  return `auto`;
}
var r = [`light`, `dark`, `auto`],
  i = {
    light: `浅色`,
    dark: `深色`,
    auto: `跟随系统`,
  },
  a = {
    light: `pi pi-sun`,
    dark: `pi pi-moon`,
    auto: `pi pi-desktop`,
  },
  o = `theme`;
function s() {
  let s = useState(`theme-mode`, () => n()),
    c = useState(
      `theme-dark`,
      () =>
        typeof document < `u` &&
        document.documentElement.classList.contains(`app-dark`),
    ),
    l = () => window.matchMedia(`(prefers-color-scheme: dark)`);
  function u() {
    c.value = s.value === `dark` || (s.value === `auto` && l().matches);
  }
  function d() {
    let e = document.documentElement;
    (e.classList.toggle(`app-dark`, c.value),
      (e.style.colorScheme = c.value ? `dark` : `light`));
  }
  function f() {
    (u(), d());
  }
  let p = null,
    m = () => {
      s.value === `auto` && f();
    };
  function h() {
    (p?.removeEventListener(`change`, m), (p = null));
  }
  function g() {
    (h(), (s.value = n()), f(), (p = l()), p.addEventListener(`change`, m));
  }
  function _(e) {
    s.value = e;
    try {
      localStorage.setItem(o, e);
    } catch {}
    f();
  }
  function v() {
    _(r[(r.indexOf(s.value) + 1) % r.length]);
  }
  return {
    mode: s,
    isDark: c,
    init: g,
    dispose: h,
    set: _,
    cycle: v,
    label: computed(() => i[s.value]),
    icon: computed(() => a[s.value]),
  };
}
export { s as t };