import { jsx as e, jsxs as o, Fragment as P } from "react/jsx-runtime";
import { useState as R, useEffect as W } from "react";
import $ from "react-helmet";
import { Container as t, Toolbar as u, Divider as B, List as C, Link as v, ListItemButton as G, ListItemText as M, AppBar as j, IconButton as E, Typography as w, Drawer as F } from "@mui/material";
import { Menu as S } from "@mui/icons-material";
import Z from "../Footer/index.js";
import A from "../Wallet/Open.js";
import b from "../Icon/index.js";
import H from "../Logo/index.js";
import { styled as x } from "../Theme/index.js";
function ie({
  title: i,
  brand: l,
  description: s = void 0,
  links: a = [],
  logo: c = /* @__PURE__ */ e(H, { showText: !1, style: { width: "40px", height: "40px" } }),
  showLogo: d = !1,
  addons: y = void 0,
  footer: k = /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(Z, {}) }),
  baseUrl: h = "",
  homeUrl: N = "/",
  variant: z = "shadow",
  contentOnly: L = !1,
  children: p,
  ...D
}) {
  const [m, I] = R(!1), f = () => {
    I(!m);
  };
  if (W(() => {
    const { searchParams: r } = new URL(window.location.href), g = r.get("inviter");
    g && window.localStorage.setItem("inviter", g);
  }, []), L)
    return /* @__PURE__ */ e(t, { children: p });
  let n = "";
  const { pathname: T } = new URL(window.location);
  a.forEach((r) => {
    T.startsWith(r.url) && r.url.length > n.length && (n = r.url);
  });
  const O = /* @__PURE__ */ o("div", { children: [
    /* @__PURE__ */ o(u, { className: "toolbar toolbar--drawer", children: [
      !!d && /* @__PURE__ */ e("div", { className: "menu-logo", children: c }),
      /* @__PURE__ */ e("div", { style: { flexGrow: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: l })
    ] }),
    /* @__PURE__ */ e(B, {}),
    /* @__PURE__ */ e(C, { children: a.map((r) => /* @__PURE__ */ e(v, { className: "nav-link", href: r.url, underline: "hover", children: /* @__PURE__ */ e(G, { className: n === r.url ? "drawer-highlight-nav" : "", children: /* @__PURE__ */ o(M, { children: [
      typeof r.icon == "string" ? /* @__PURE__ */ e(b, { name: r.icon, size: 18 * (r.iconZoom || 1), color: "inherit", style: { marginRight: "5px" } }) : r.icon,
      r.title
    ] }) }) }, r.url)) })
  ] });
  return /* @__PURE__ */ o(P, { children: [
    /* @__PURE__ */ o(U, { ...D, children: [
      /* @__PURE__ */ e($, { title: i }),
      /* @__PURE__ */ e(j, { position: "fixed", className: `appbar appbar--${z}`, color: "default", style: { height: 56 }, children: /* @__PURE__ */ e(t, { disableGutters: !0, children: /* @__PURE__ */ o(u, { className: "toolbar", children: [
        /* @__PURE__ */ e(
          E,
          {
            color: "inherit",
            "aria-label": "open drawer",
            edge: "start",
            onClick: f,
            className: "menu-button",
            size: "large",
            children: /* @__PURE__ */ e(S, {})
          }
        ),
        !!d && /* @__PURE__ */ e("div", { className: "menu-logo", children: c }),
        /* @__PURE__ */ e(
          w,
          {
            href: N,
            component: "a",
            variant: "h5",
            color: "inherit",
            noWrap: !0,
            className: "brand",
            sx: {
              display: "block"
            },
            children: l
          }
        ),
        s && /* @__PURE__ */ e(w, { component: "small", variant: "subtitle2", color: "inherit", noWrap: !0, className: "description", children: s }),
        /* @__PURE__ */ e("div", { style: { flexGrow: 1 } }),
        /* @__PURE__ */ e("div", { className: "nav-links", children: a.map((r) => /* @__PURE__ */ o(
          v,
          {
            href: r.url,
            className: `nav-link ${n === r.url ? "highlight-nav" : ""}`,
            color: r.color,
            underline: "hover",
            children: [
              typeof r.icon == "string" ? /* @__PURE__ */ e(
                b,
                {
                  name: r.icon,
                  size: 20 * (r.iconZoom || 1),
                  color: "inherit",
                  style: { marginRight: "5px" }
                }
              ) : r.icon,
              r.title
            ]
          },
          r.url
        )) }),
        y
      ] }) }) }),
      /* @__PURE__ */ e("div", { className: "toolbar" }),
      /* @__PURE__ */ e(t, { style: { marginTop: 16, flex: 1 }, children: p }),
      k,
      !!h && /* @__PURE__ */ e(A, { locale: "zh", link: h })
    ] }),
    /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
      F,
      {
        variant: "temporary",
        open: m,
        onClose: f,
        classes: {
          paper: "drawer-paper"
        },
        ModalProps: {
          keepMounted: !0,
          // Better open performance on mobile.
          disablePortal: !0
        },
        children: O
      }
    ) })
  ] });
}
const U = x("div")`
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .appbar {
    &.appbar--border {
      box-shadow: none;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        bottom: -1px;
        display: block;
        background-color: rgba(0, 0, 0, 0.12);
      }
    }
  }

  .toolbar {
    min-height: 56px;
    background: inherit;
    white-space: nowrap;
    .menu-logo {
      font-size: 0;
      margin-right: 8px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      .nav-link {
        margin: 8px 12px;
        font-size: 16px;
        display: flex;
        align-items: center;
      }

      .highlight-nav {
        font-weight: bolder;
      }
    }
    .brand {
      cursor: pointer;
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 1;
    }
    .description {
      color: #999;
      font-size: 15px;
      margin-left: 10px;
      font-weight: normal;
      flex-shrink: 999999;
    }
  }

  ${(i) => i.theme.breakpoints.up("md")} {
    .toolbar {
      .menu-button {
        display: none;
      }
      .menu-logo {
        & + .brand {
          padding-left: 45px;
          margin-left: -45px;
        }
      }
    }
  }

  ${(i) => i.theme.breakpoints.down("md")} {
    .toolbar {
      .nav-links,
      .menu-logo,
      .description {
        display: none;
      }
    }
  }
`, q = x("nav")`
  width: 240px;
  .drawer-paper {
    width: 240px;
  }
  .toolbar {
    min-height: 56px;
  }

  a:hover,
  a:active,
  a:visited,
  a:focus {
    text-decoration: none;
  }

  .drawer-highlight-nav {
    background-color: #eee;
  }

  .toolbar--drawer {
    font-size: 18px;
    .menu-logo {
      display: inline-flex;
    }
  }
`;
export {
  ie as default
};
