import { defineComponent as b, computed as s, createElementBlock as i, openBlock as a, createElementVNode as n, createCommentVNode as S, createVNode as w, unref as r, createBlock as v, withCtx as y, createTextVNode as L, normalizeClass as f, toDisplayString as A } from "vue";
import { ScalarToggle as E, ScalarButton as h, ScalarLoading as k } from "@scalar/components";
const V = { class: "bg-b-1 pointer-events-auto flex flex-col items-stretch overflow-hidden rounded-lg border shadow-sm" }, C = { class: "flex items-center gap-2 px-2 py-1.5" }, B = { class: "min-w-[48px]" }, D = {
  key: 1,
  class: "text-c-3 flex h-6 items-center justify-center rounded px-2 text-[11px] whitespace-nowrap"
}, N = {
  key: 0,
  class: "bg-b-2/40 flex items-center gap-2 border-t px-2 py-1 text-[11px]"
}, I = /* @__PURE__ */ b({
  __name: "EditorSavePanel",
  props: {
    isAutoSaveEnabled: { type: Boolean },
    isDirty: { type: Boolean },
    saveLoader: {}
  },
  emits: ["update:isAutoSaveEnabled", "saveNow"],
  setup(e, { emit: x }) {
    const l = x, d = s(() => !e.isAutoSaveEnabled && e.isDirty ? "Unsaved" : e.saveLoader.isActive ? e.saveLoader.isLoading ? "Saving…" : e.saveLoader.isInvalid ? "Save failed" : e.saveLoader.isValid ? "Saved" : null : null), o = s(() => d.value !== null), u = s(() => o.value ? !e.isAutoSaveEnabled && e.isDirty ? "warning" : e.saveLoader.isLoading ? "loading" : e.saveLoader.isInvalid ? "danger" : e.saveLoader.isValid ? "success" : null : null), m = s(() => {
      switch (u.value) {
        case "warning":
          return "bg-c-alert";
        case "success":
          return "bg-c-accent";
        case "danger":
          return "bg-c-danger";
        default:
          return "bg-b-3";
      }
    }), g = s(() => {
      switch (u.value) {
        case "warning":
          return "text-c-alert";
        case "success":
          return "text-c-accent";
        case "danger":
          return "text-c-danger";
        default:
          return "text-c-2";
      }
    });
    return (p, t) => (a(), i("div", V, [
      n("div", C, [
        t[3] || (t[3] = n("span", { class: "text-c-2 text-[11px] font-medium whitespace-nowrap" }, " Auto-save ", -1)),
        w(r(E), {
          modelValue: e.isAutoSaveEnabled,
          "onUpdate:modelValue": t[0] || (t[0] = (c) => l("update:isAutoSaveEnabled", c))
        }, null, 8, ["modelValue"]),
        t[4] || (t[4] = n("div", { class: "bg-b-3 mx-1 h-4 w-px" }, null, -1)),
        n("div", B, [
          e.isAutoSaveEnabled ? (a(), i("div", D, " Auto ")) : (a(), v(r(h), {
            key: 0,
            disabled: !e.isDirty || e.saveLoader.isLoading,
            size: "xs",
            variant: "outlined",
            onClick: t[1] || (t[1] = (c) => l("saveNow"))
          }, {
            default: y(() => [...t[2] || (t[2] = [
              L(" Save ", -1)
            ])]),
            _: 1
          }, 8, ["disabled"]))
        ])
      ]),
      o.value ? (a(), i("div", N, [
        e.saveLoader.isActive ? (a(), v(r(k), {
          key: 0,
          class: "self-center",
          loader: e.saveLoader,
          size: "sm"
        }, null, 8, ["loader"])) : (a(), i("span", {
          key: 1,
          class: f(["size-1.5 rounded-full", m.value])
        }, null, 2)),
        n("span", {
          class: f(["whitespace-nowrap", g.value])
        }, A(d.value), 3)
      ])) : S("", !0)
    ]));
  }
});
export {
  I as default
};
