import React, { memo, forwardRef } from "react";
import styled from "styled-components";
import { Flex } from "@netdata/netdata-ui";
import { useContainer } from "../charts";
import { withMenuGroupIds } from "./context";
import { MenuGroupContainer } from "./menuGroup";
export const MenuWrapper = forwardRef((props, ref) => (React.createElement(Flex, Object.assign({ as: "ul", width: "100%", role: "complementary", column: true, ref: ref }, props))));
export const Menu = memo(({ menuGroupIds, onMenuGroupClick, onSubMenuClick, ...rest }) => (React.createElement(MenuWrapper, Object.assign({}, rest), menuGroupIds.map(id => (React.createElement(MenuGroupContainer, { key: id, id: id, onMenuGroupClick: onMenuGroupClick, onSubMenuClick: onSubMenuClick }))))));
export const MenuContainer = withMenuGroupIds(Menu);
const StyledMenuSidebar = styled(Flex).attrs({
    overflow: { vertical: "auto" },
}) `
  position: fixed;
  top: ${({ top }) => top};
  right: 12px;
  bottom: 12px;
  max-height: calc(100vh - ${({ top }) => top});
`;
export const MenuSidebar = props => {
    const container = useContainer();
    const top = `${container.getBoundingClientRect().top}px`;
    return React.createElement(StyledMenuSidebar, Object.assign({ top: top }, props));
};
export const MenuSidebarContainer = ({ onMenuGroupClick, onSubMenuClick, ...rest }) => (React.createElement(MenuSidebar, Object.assign({}, rest),
    React.createElement(MenuContainer, { onMenuGroupClick: onMenuGroupClick, onSubMenuClick: onSubMenuClick })));
export const SidebarContainer = memo(MenuSidebarContainer);
//# sourceMappingURL=menu.js.map