import { jsx as o, jsxs as c } from "react/jsx-runtime";
import { useState as f } from "react";
import { useReactive as v, useCreation as g } from "ahooks";
import { Close as y, Menu as h } from "@mui/icons-material";
import { Container as x, useTheme as b, useMediaQuery as w, Drawer as P, Button as k } from "@mui/material";
import u from "./header.js";
import { styled as s } from "../Theme/index.js";
function z({ prepend: n, children: r = null, ...i }) {
  const a = b(), l = w(a.breakpoints.down("md")), [t, m] = f(!1), d = typeof r == "function" ? r({ isMobile: l, closeMenu: () => m(!1) }) : r, e = v({
    changed: !1,
    value: "",
    priority: ""
  });
  return g(() => {
    if (document.documentElement?.style) {
      const p = () => {
        e.changed && (e.value ? document.documentElement.style.setProperty("overflow", e.value, e.priority) : document.documentElement.style.removeProperty("overflow"), e.value = "", e.priority = "", e.changed = !1);
      };
      return t ? (e.changed = !0, e.value = document.documentElement.style.getPropertyValue("overflow"), e.priority = document.documentElement.style.getPropertyPriority("overflow"), document.documentElement.style.setProperty("overflow", "revert", "important")) : p(), p;
    }
    return () => {
    };
  }, [t]), r ? /* @__PURE__ */ c(
    C,
    {
      prepend: n || /* @__PURE__ */ o(
        k,
        {
          sx: { color: a.palette.grey[500] },
          className: "header-menu",
          "aria-label": "header menu button",
          onClick: () => m(!t),
          children: t ? /* @__PURE__ */ o(y, {}) : /* @__PURE__ */ o(h, {})
        }
      ),
      ...i,
      children: [
        !l && d,
        l && /* @__PURE__ */ o(
          P,
          {
            open: t,
            onClose: () => m(!1),
            ModalProps: {
              disablePortal: !1,
              keepMounted: !0,
              BackdropComponent: void 0
            },
            anchor: "top",
            sx: {
              top: 64,
              zIndex: a.zIndex.appBar - 1
            },
            slotProps: {
              paper: {
                sx: {
                  top: 64,
                  bottom: 0,
                  boxShadow: "none",
                  backgroundImage: "none",
                  backgroundColor: a.palette.background.paper,
                  "& .navmenu.navmenu--inline": {
                    margin: 0,
                    padding: 0
                  }
                }
              }
            },
            children: /* @__PURE__ */ o(M, { children: d })
          }
        )
      ]
    }
  ) : /* @__PURE__ */ o(u, { prepend: n, ...i });
}
const C = s(u)`
  .header-menu {
    display: none;
  }
  ${(n) => n.theme.breakpoints.down("md")} {
    .header-menu {
      display: flex;
      padding-left: 6px;
      padding-right: 6px;
      min-width: 0;
      margin-left: -4px;
      margin-right: 8px;
    }
  }
`, M = s(x)`
  padding-top: 8px;
  padding-bottom: 16px;
  .navmenu {
    margin: 0 -16px;
    .navmenu-root > .navmenu-item,
    .navmenu-root > .navmenu-sub {
      border: 0;
    }
  }
`;
export {
  z as default
};
