'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('@chakra-ui/react');
var md = require('react-icons/md');
var reactRouterDom = require('react-router-dom');
var Logo = require('../Logo/Logo.cjs');
var Nav = require('../Nav/Nav.cjs');
var useLocalStorage = require('../../hooks/useLocalStorage.cjs');

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
function Sidebar(props) {
  const {
    items = [],
    groups = [],
    footerItems = [],
    isCollapsible = true,
    isCollapsed: initialIsCollapsed = false,
    logoOverrides,
    status
  } = props;
  const bg = react.useColorModeValue("darkblue.900", "gray.700");
  const [isCollapsed, setIsCollapsed] = useLocalStorage("isNavCollapsed", initialIsCollapsed);
  const renderLogo = /* @__PURE__ */ jsxRuntime.jsx(react.Link, { as: reactRouterDom.Link, to: "/", children: /* @__PURE__ */ jsxRuntime.jsx(Logo, { alt: "Redpanda Cloud", height: 20, isCollapsed, overrides: logoOverrides }) });
  const padding = 3;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    react.Box,
    {
      as: "aside",
      p: padding,
      bg,
      boxShadow: "xl",
      zIndex: 2,
      position: "sticky",
      top: "0",
      height: "100vh",
      width: isCollapsed ? "58px" : "200px",
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { mt: 3.5, ml: 3, children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip, { label: "Home", placement: "right", hasArrow: true, children: renderLogo }) : renderLogo }),
        items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Nav, { status, items, isCollapsed }),
        groups.length > 0 && groups.map((group, i) => /* @__PURE__ */ jsxRuntime.jsx(Nav, __spreadProps(__spreadValues({ status }, group), { isCollapsed }), i)),
        props.children,
        /* @__PURE__ */ jsxRuntime.jsx(react.Box, { position: "absolute", w: "fit", bottom: 0, left: 0, right: 0, padding, children: /* @__PURE__ */ jsxRuntime.jsx(
          Nav,
          {
            isCollapsed,
            status,
            items: [
              ...footerItems,
              ...isCollapsible ? [
                {
                  to: "toggle-sidebar",
                  title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
                  icon: isCollapsed ? md.MdOutlineArrowForwardIos : md.MdOutlineArrowBackIos,
                  isIconOnly: true,
                  status: "success",
                  // Note: using 'any' because chakra event omits preventDefault in their type.
                  onClick: (e) => {
                    e.preventDefault();
                    setIsCollapsed(!isCollapsed);
                  }
                }
              ] : []
            ]
          }
        ) })
      ]
    }
  );
}

module.exports = Sidebar;
//# sourceMappingURL=Sidebar.cjs.map
