import { jsxs as l, jsx as e, Fragment as y } from "react/jsx-runtime";
import { useEffect as I, isValidElement as M } from "react";
import { Box as r, Stack as A, Typography as f, useMediaQuery as B } from "@mui/material";
import j from "@arcblock/ux/lib/Tabs";
import w from "./app-badge.js";
import { useAppInfo as C } from "./app-info-context.js";
function b() {
  return B((i) => i.breakpoints.down("md"));
}
function h({ sx: t = {} }) {
  const i = b();
  return /* @__PURE__ */ e(r, { sx: { mx: i ? -2 : -3, borderBottom: "1px solid", borderColor: "divider", mt: 1.5, mb: 1, ...t } });
}
function D({ onTabChange: t = void 0 }) {
  const i = b(), {
    inService: d,
    navItem: n,
    icon: m = void 0,
    name: p = "",
    description: c = void 0,
    actions: o = void 0,
    badges: x = [],
    tabs: a = [],
    currentTab: g = "",
    updateAppInfo: u
  } = C();
  return I(() => {
    d || u({
      name: n?.title || "",
      description: n?.description || ""
    });
  }, [n?.title, n?.description, d, u]), p ? /* @__PURE__ */ l(r, { className: "app-header", sx: { mt: 3, mb: 3 }, children: [
    /* @__PURE__ */ l(
      r,
      {
        sx: {
          display: "flex",
          alignItems: "center",
          gap: 1
        },
        children: [
          m && /* @__PURE__ */ e(r, { sx: { display: "flex", alignItems: "center", justifyContent: "center" }, children: m }),
          /* @__PURE__ */ l(A, { sx: { flexGrow: 1 }, children: [
            /* @__PURE__ */ e(f, { variant: "h1", sx: { mb: 0.5 }, children: p }),
            c && /* @__PURE__ */ e(
              f,
              {
                variant: "body2",
                color: "text.secondary",
                sx: { lineHeight: 1.6, "& a": { color: "primary.main" }, maxWidth: 980 },
                children: c
              }
            )
          ] }),
          !i && o && /* @__PURE__ */ e(r, { sx: { ml: 1 }, children: o })
        ]
      }
    ),
    x.length > 0 && /* @__PURE__ */ e(r, { sx: { display: "flex", flexWrap: "wrap", gap: 1, alignItems: "center", mt: 2 }, children: x.map(
      (s, v) => M(s) ? s : /* @__PURE__ */ e(w, { ...s }, s.label || v)
    ) }),
    i && o && /* @__PURE__ */ e(r, { sx: { mt: i ? 2 : 0 }, children: o }),
    a.length <= 1 && /* @__PURE__ */ e(h, {}),
    a.length > 1 && /* @__PURE__ */ l(y, { children: [
      /* @__PURE__ */ e(j, { tabs: a, current: g, onChange: t, scrollButtons: "auto", sx: { mt: 2.5 } }),
      /* @__PURE__ */ e(h, { sx: { mt: 0 } })
    ] })
  ] }) : null;
}
export {
  D as default
};
