import { jsx as o, jsxs as c } from "react/jsx-runtime";
import { useState as f } from "react";
import { useReactive as y, useCreation as v } from "ahooks";
import { Close as h, Menu as g } from "@mui/icons-material";
import { Container as b, useTheme as x, useMediaQuery as w, Drawer as P, Button as k } from "@mui/material";
import p from "./header.js";
import { styled as i } from "../Theme/index.js";
function z({ prepend: n, children: r = null, ...s }) {
  const a = x(), l = w(a.breakpoints.down("md")), [t, m] = f(!1), u = typeof r == "function" ? r({ isMobile: l, closeMenu: () => m(!1) }) : r, e = y({
    changed: !1,
    value: "",
    priority: ""
  });
  return v(() => {
    if (document.documentElement?.style) {
      const d = () => {
        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")) : d(), d;
    }
    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(h, {}) : /* @__PURE__ */ o(g, {})
        }
      ),
      ...s,
      children: [
        !l && u,
        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: {
                style: {
                  top: 64,
                  bottom: 0,
                  boxShadow: "none",
                  backgroundImage: "none",
                  backgroundColor: a.palette.background.paper
                }
              }
            },
            children: /* @__PURE__ */ o(M, { children: u })
          }
        )
      ]
    }
  ) : /* @__PURE__ */ o(p, { prepend: n, ...s });
}
const C = i(p)`
  .header-menu {
    display: none;
  }
  ${(n) => n.theme.breakpoints.down("md")} {
    .header-menu {
      display: flex;
      margin-right: 12px;
    }
  }
`, M = i(b)`
  padding-top: 8px;
  padding-bottom: 16px;
  .navmenu {
    margin: 0 -16px;
    .navmenu-root > .navmenu-item,
    .navmenu-root > .navmenu-sub {
      border: 0;
    }
  }
`;
export {
  z as default
};
