import { Button, HeaderGlobalAction, HeaderPanel as CarbonHeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
import React from "react";
import { useOnClickOutside } from "../helpers";
import C3NavigationSidebarElement from "./c3-navigation-sidebar-element";
import styled from "styled-components";
import { useSidebarState } from "./c3-sidebar-state-provider";
const Wrapper = styled.div `
	.cds--popover * {
		z-index: 9000;
	}
`;
const HeaderPanel = styled(CarbonHeaderPanel) `
	visibility: ${({ expanded }) => (expanded ? "visible" : "hidden")};
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: max-content 1fr;
	overflow-y: auto;
	overflow-x: hidden;
`;
const BottomElements = styled.div `
	align-self: end;
`;
const C3NavigationSideBar = (props) => {
    const { icon, sideBar, children, version, bottomChildren } = props;
    const { callbacks, onOpen } = sideBar;
    const { isOpen, setIsOpen: setOpenState } = useSidebarState()[sideBar.type];
    const setIsOpen = (open) => {
        if (open) {
            callbacks?.beforeOpening?.();
            onOpen?.();
        }
        setOpenState(open);
        if (!open)
            callbacks?.afterClosing?.();
    };
    const itemTabIndex = isOpen ? undefined : -1;
    const [panelRef, iconRef] = useOnClickOutside(() => setIsOpen(false));
    const id = `c3-${sideBar.type}-sidebar`;
    return (React.createElement(Wrapper, null,
        React.createElement(HeaderGlobalAction, { ref: iconRef, "aria-label": `Open ${sideBar.ariaLabel}`, "aria-expanded": isOpen, "aria-controls": id, onClick: () => {
                setIsOpen(!isOpen);
            }, isActive: isOpen, tooltipAlignment: sideBar.type === "user" ? "end" : "center", 
            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
            /* @ts-ignore */
            leaveDelayMs: 100 }, icon),
        React.createElement(HeaderPanel, { ref: panelRef, expanded: isOpen, id: id },
            React.createElement(Stack, null,
                children,
                sideBar.elements &&
                    sideBar.elements.length > 0 &&
                    "customElements" in sideBar &&
                    sideBar.customElements &&
                    "activeOrganization" in sideBar.customElements &&
                    !sideBar.customElements?.activeOrganization && React.createElement(SwitcherDivider, null),
                sideBar.elements?.map((element, index) => (React.createElement(C3NavigationSidebarElement, { key: element.key, element: element, index: index, sideBar: sideBar, setSideBarOpen: setIsOpen, itemTabIndex: itemTabIndex }))),
                bottomChildren),
            version,
            React.createElement(BottomElements, null, sideBar.bottomElements &&
                sideBar.bottomElements.map((element) => (React.createElement(Button, { kind: element.kind, key: element.key, className: "cds--switcher__item", renderIcon: element.renderIcon, onClick: () => {
                        if (element.onClick) {
                            element.onClick();
                        }
                        if (sideBar.closeOnClick !== false) {
                            setIsOpen(false);
                        }
                    }, tabIndex: itemTabIndex }, element.label)))))));
};
export default C3NavigationSideBar;
