import React, { forwardRef, useMemo } from "react";
import styled, { css } from "styled-components";
import { Text, Flex, getColor } from "@netdata/netdata-ui";
import { MenuItemContainer } from "../subMenu";
import { useMenuGroupActive } from "../active";
import { withMenuGroup } from "./context";
export const MenuGroupLabelWrapper = styled(Text).attrs({ color: "border" }) `
  font-weight: "500";
`;
const Icon = styled(MenuGroupLabelWrapper) `
  svg {
    width: 20px;
    text-align: center;
  }
`;
const styledActive = css `
  border-left: 2px solid ${getColor("key")};
  ${MenuGroupLabelWrapper} {
    color: ${getColor("key")};
  }
`;
const Container = styled(Flex) `
  &&& {
    border-left: 2px solid transparent;
    ${props => props.active && styledActive}
    ${props => props.active && `${MenuGroupLabelWrapper} { font-weight: bold; }`}

    text-decoration: none;
    &:hover {
      ${styledActive}
    }
  }
`;
export const MenuGroupLabelContainer = withMenuGroup(MenuGroupLabelWrapper, ({ title }) => ({
    children: title,
}));
export const MenuGroupIcon = ({ icon }) => React.createElement(Icon, { dangerouslySetInnerHTML: { __html: icon } });
export const MenuGroupIconContainer = withMenuGroup(MenuGroupIcon, ({ icon }) => ({ icon }));
export const MenuGroupItemWrapper = forwardRef(({ id, ...rest }, ref) => (React.createElement(Container, Object.assign({ ref: ref, as: "a", gap: 2, padding: [1, 5], "data-sidebar-menugroupid": id }, rest))));
export const MenuGroupItemContainer = withMenuGroup(MenuGroupItemWrapper, ({ id, link }) => ({
    id,
    href: `#${link}`,
}));
export const MenuGroupItem = ({ id, ...rest }) => (React.createElement(MenuGroupItemContainer, Object.assign({ id: id }, rest),
    React.createElement(MenuGroupIconContainer, { id: id }),
    React.createElement(MenuGroupLabelContainer, { id: id })));
export const SubMenus = ({ subMenuIds, onSubMenuClick, ...rest }) => (React.createElement(Flex, Object.assign({ column: true, role: "list", padding: [0, 0, 2, 0] }, rest), subMenuIds.map(id => (React.createElement(MenuItemContainer, { key: id, id: id, onSubMenuClick: onSubMenuClick })))));
export const SubMenusContainer = withMenuGroup(SubMenus, ({ subMenuIds }) => ({ subMenuIds }));
export const MenuGroupWrapper = forwardRef((props, ref) => (React.createElement(Flex, Object.assign({ as: "li", column: true, ref: ref }, props))));
export const withMenuGroupClickHandlers = Component => ({ id, onMenuGroupClick, onSubMenuClick, ...rest }) => {
    const menuGroupClick = useMemo(() => onMenuGroupClick && (e => onMenuGroupClick(id, e)), [
        onMenuGroupClick,
        id,
    ]);
    const subMenuClick = useMemo(() => onSubMenuClick && ((subMenuId, e) => onSubMenuClick(id, subMenuId, e)), [onSubMenuClick, id]);
    return (React.createElement(Component, Object.assign({ id: id, onMenuGroupClick: menuGroupClick, onSubMenuClick: subMenuClick }, rest)));
};
export const MenuGroup = ({ id, active, onMenuGroupClick, onSubMenuClick, ...rest }) => (React.createElement(MenuGroupWrapper, Object.assign({}, rest),
    React.createElement(MenuGroupItem, { id: id, onClick: onMenuGroupClick, active: active }),
    active && React.createElement(SubMenusContainer, { id: id, onSubMenuClick: onSubMenuClick })));
export const withMenuActive = Component => ({ id, ...rest }) => {
    const active = useMenuGroupActive(id);
    return React.createElement(Component, Object.assign({ active: active, id: id }, rest));
};
export const MenuGroupContainer = withMenuActive(withMenuGroupClickHandlers(MenuGroup));
//# sourceMappingURL=menuGroup.js.map