import { Button } from "@carbon/react";
import React, { useEffect, useRef, useState } from "react";
import { SwitcherDivider } from "./components";
const C3NavigationSidebarElement = (props) => {
    const sideBarElementRef = useRef(null);
    const [isOverflown, setIsOverflown] = useState(false);
    useEffect(() => {
        const element = sideBarElementRef.current;
        setIsOverflown(element ? element.offsetWidth < element.scrollWidth : false);
    }, [JSON.stringify(props.element)]);
    return (React.createElement(React.Fragment, null,
        props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
        React.createElement(Button, { style: {
                width: "calc(16rem - 2px)",
                ...(props.index === 0 &&
                    (!("elements" in props.sideBar) || !props.sideBar.elements)
                    ? { marginTop: "1.5rem" }
                    : {}),
            }, size: "sm", kind: props.element.kind ?? "ghost", className: "cds--switcher__item", onClick: () => {
                if (props.element.onClick) {
                    props.element.onClick();
                }
                if (props.sideBar.closeOnClick !== false) {
                    props.setSideBarOpen(false);
                }
            }, tabIndex: props.itemTabIndex, renderIcon: props.element.renderIcon },
            React.createElement("span", { ref: (el) => (sideBarElementRef.current = el), title: isOverflown ? props.element.label : "", style: {
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    width: "100%",
                } }, props.element.label))));
};
export default C3NavigationSidebarElement;
