import { reactive as $, onMounted as N, resolveComponent as n, openBlock as U, createBlock as O, mergeProps as G, unref as r, withCtx as l, createElementVNode as c, createVNode as o, createTextVNode as H, toDisplayString as M, nextTick as g } from "vue";
import "./vendor.js";
import { MVFRAME_DEFAULT_THEME_NAME as k, MVFRAME_STORAGE_PRIMARY as v, MVFRAME_THEME_CLASS_PREFIX as E, MVFRAME_STORAGE_THEME_NAME as B, persistMvframeTheme as d, applyMvframeTheme as p } from "./composition.js";
const j = { class: "p16" }, W = { class: "flexMode vc g16 vl" }, X = { class: "m0 flexMode vc g8" }, Y = { class: "flexMode vl g12 wp100" }, q = { class: "flexMode vc g8 wp100" }, Z = /* @__PURE__ */ Object.assign({
  name: "FrameConfig",
  inheritAttrs: !1
}, {
  __name: "Config",
  emits: ["mounted"],
  setup(z, { emit: C }) {
    const b = C, e = $({
      loading: !1,
      primary: "#007bff",
      theme: k,
      isDark: !1
    });
    N(() => {
      V(), b("mounted");
    });
    const u = () => {
      const t = getComputedStyle(document.documentElement).getPropertyValue("--color-primary").trim();
      e.primary = t || "#007bff";
    }, V = () => {
      var h;
      const t = localStorage.getItem(v);
      t ? e.primary = t : u();
      const s = [...document.documentElement.classList].find(
        (m) => m.startsWith(E)
      );
      e.theme = (s == null ? void 0 : s.slice(E.length)) || localStorage.getItem(B) || ((h = globalThis.$config) == null ? void 0 : h.theme) || k, e.isDark = document.documentElement.classList.contains("dark");
    }, _ = () => {
      d({
        primary: e.primary,
        theme: e.theme,
        mode: e.isDark ? "dark" : "light"
      });
    }, f = () => {
      const t = localStorage.getItem(v);
      return t != null && t !== "" ? t : null;
    }, A = () => {
      const t = e.isDark ? "dark" : "light";
      if (!e.primary) {
        d({ primary: null }), p({ primary: null, mode: t, theme: e.theme }), g(() => u());
        return;
      }
      p({ primary: e.primary, mode: t, theme: e.theme }), _();
    }, D = () => {
      const t = e.isDark ? "dark" : "light";
      p({
        primary: f(),
        mode: t,
        theme: e.theme
      }), d({ mode: t });
    }, T = () => {
      const t = e.isDark ? "dark" : "light";
      p({
        primary: f(),
        mode: t,
        theme: e.theme
      }), d({ theme: e.theme }), g(() => u());
    }, S = () => {
      d({ primary: null }), p({
        primary: null,
        mode: e.isDark ? "dark" : "light",
        theme: e.theme
      }), g(() => u());
    }, F = async () => {
      _();
    }, R = [
      "#007bff",
      "#409eff",
      "#16b1ff",
      "#28a745",
      "#6f42c1",
      "#e83e8c",
      "#dc3545",
      "#fd7e14"
    ], x = [
      {
        label: "Main",
        value: "main"
      },
      {
        label: "Glass",
        value: "glass"
      }
    ];
    return (t, a) => {
      const s = n("el-color-picker"), h = n("el-button"), m = n("Card"), P = n("Select"), y = n("Icon"), w = n("el-switch"), I = n("Lang"), L = n("DrawerArea");
      return U(), O(L, G({
        loading: r(e).loading,
        onSubmit: F
      }, t.$attrs, { class: "MvcFrameConfig" }), {
        default: l(() => [
          c("div", j, [
            o(m, {
              title: "Theme color",
              class: "mb16"
            }, {
              default: l(() => [
                c("div", W, [
                  o(s, {
                    modelValue: r(e).primary,
                    "onUpdate:modelValue": a[0] || (a[0] = (i) => r(e).primary = i),
                    "color-format": "hex",
                    predefine: R,
                    onChange: A
                  }, null, 8, ["modelValue"]),
                  o(h, { onClick: S }, {
                    default: l(() => [
                      H(M(t.$l("Restore default")), 1)
                    ]),
                    _: 1
                  })
                ])
              ]),
              _: 1
            }),
            o(m, { class: "mb16" }, {
              header: l(() => [
                c("h4", X, M(t.$l("Appearance")), 1)
              ]),
              default: l(() => [
                c("div", Y, [
                  o(P, {
                    modelValue: r(e).theme,
                    "onUpdate:modelValue": a[1] || (a[1] = (i) => r(e).theme = i),
                    class: "w160",
                    label: "Theme",
                    "material-label": "",
                    options: x,
                    onChange: T
                  }, null, 8, ["modelValue"]),
                  c("div", q, [
                    o(y, { name: "sun" }),
                    o(w, {
                      modelValue: r(e).isDark,
                      "onUpdate:modelValue": a[2] || (a[2] = (i) => r(e).isDark = i),
                      "inline-prompt": "",
                      "active-text": t.$l("Dark"),
                      "inactive-text": t.$l("Light"),
                      onChange: D
                    }, null, 8, ["modelValue", "active-text", "inactive-text"]),
                    o(y, { name: "moon" })
                  ])
                ])
              ]),
              _: 1
            }),
            o(m, {
              title: "Language",
              class: "mb16"
            }, {
              default: l(() => [
                o(I)
              ]),
              _: 1
            })
          ])
        ]),
        _: 1
      }, 16, ["loading"]);
    };
  }
});
export {
  Z as default
};
