import { Button, HeaderGlobalAction, HeaderPanel as CarbonHeaderPanel, Stack, SwitcherDivider, } from "@carbon/react";
import React, { useEffect } 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, scrollBarWidth, setScrollBarWidth, } = useSidebarState()[sideBar.type];
    const setIsOpen = (open) => {
        if (open) {
            callbacks?.beforeOpening?.();
            onOpen?.();
        }
        setOpenState(open);
        if (!open)
            callbacks?.afterClosing?.();
    };
    const itemTabIndex = isOpen ? undefined : -1;
    const { panelRef, setPanelRef, setIconRef } = useOnClickOutside(() => setIsOpen(false));
    const id = `c3-${sideBar.type}-sidebar`;
    const handleResize = () => {
        const scrollbarWidth = panelRef.current
            ? panelRef.current?.offsetWidth - panelRef.current?.clientWidth
            : 0;
        setScrollBarWidth(scrollbarWidth);
    };
    useEffect(() => {
        window.addEventListener("resize", handleResize);
        handleResize();
        return () => window.removeEventListener("resize", handleResize);
    }, []);
    useEffect(() => {
        if (isOpen) {
            setTimeout(() => {
                handleResize();
            }, 120);
        }
    }, [isOpen]);
    return (React.createElement(Wrapper, null,
        React.createElement(HeaderGlobalAction
        // eslint-disable-next-line
        // @ts-ignore
        , { 
            // eslint-disable-next-line
            // @ts-ignore
            ref: setIconRef, "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
        // eslint-disable-next-line
        // @ts-ignore
        , { 
            // eslint-disable-next-line
            // @ts-ignore
            ref: setPanelRef, expanded: isOpen, id: id, style: { width: isOpen ? "calc(16rem)" : "0" } },
            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, scrollBarWidth: scrollBarWidth }))),
                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, style: { width: `calc(16rem + 2px - ${scrollBarWidth}px)` } }, element.label)))))));
};
export default C3NavigationSideBar;
