import { jsxs, jsx } from 'react/jsx-runtime';
import { useColorModeValue, Box, Tooltip, Link } from '@chakra-ui/react';
import { BsChevronDoubleRight, BsChevronDoubleLeft } from 'react-icons/bs';
import { Link as Link$1 } from 'react-router-dom';
import Logo from '../Logo/Logo.js';
import Nav from '../Nav/Nav.js';
import useLocalStorage from '../../hooks/useLocalStorage.js';

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({
  previousItem = void 0,
  items = [],
  groups = [],
  footerItems = [],
  isCollapsible = true,
  isCollapsed: initialIsCollapsed = false,
  logoOverrides,
  status,
  children,
  footerChildren
}) {
  const bg = useColorModeValue("darkblue.800", "gray.700");
  const [isCollapsed, setIsCollapsed] = useLocalStorage("isNavCollapsed", initialIsCollapsed);
  const renderLogo = /* @__PURE__ */ jsx(Link, { as: Link$1, to: "/", children: /* @__PURE__ */ jsx(Logo, { alt: "Redpanda Cloud", height: 20, isCollapsed, overrides: logoOverrides }) });
  const padding = 3;
  return /* @__PURE__ */ jsxs(
    Box,
    {
      as: "aside",
      p: padding,
      bg,
      boxShadow: "xl",
      zIndex: 2,
      position: "sticky",
      top: "0",
      height: "100vh",
      width: isCollapsed ? "58px" : "200px",
      children: [
        /* @__PURE__ */ jsx(Box, { mt: 3.5, ml: 3, children: isCollapsed ? /* @__PURE__ */ jsx(Tooltip, { label: "Home", placement: "right", hasArrow: true, children: renderLogo }) : renderLogo }),
        items.length > 0 && /* @__PURE__ */ jsx(
          Nav,
          {
            status,
            items: previousItem ? [__spreadProps(__spreadValues({}, previousItem), { isPrevious: true }), ...items] : items,
            isCollapsed
          }
        ),
        groups.length > 0 && groups.map(({ heading, items: items2 }, i) => /* @__PURE__ */ jsx(
          Nav,
          {
            status,
            heading,
            items: i === 0 && previousItem ? [__spreadProps(__spreadValues({}, previousItem), { isPrevious: true }), ...items2] : items2,
            isCollapsed
          },
          i
        )),
        children,
        /* @__PURE__ */ jsxs(Box, { position: "absolute", bottom: 0, left: "0", right: "0", padding, children: [
          !isCollapsed && /* @__PURE__ */ jsx(Box, { left: "auto", right: "auto", margin: "auto", padding, children: footerChildren }),
          /* @__PURE__ */ jsx(
            Nav,
            {
              isCollapsed,
              status,
              items: [
                ...footerItems,
                ...isCollapsible ? [
                  {
                    to: "toggle-sidebar",
                    title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
                    icon: isCollapsed ? BsChevronDoubleRight : BsChevronDoubleLeft,
                    isIconOnly: false,
                    status: "success",
                    // Note: using 'any' because chakra event omits preventDefault in their type.
                    onClick: (e) => {
                      e.preventDefault();
                      setIsCollapsed(!isCollapsed);
                    }
                  }
                ] : []
              ]
            }
          )
        ] })
      ]
    }
  );
}

export { Sidebar as default };
//# sourceMappingURL=Sidebar.js.map
