import { Button } from "@carbon/react";
import React, { useEffect, useRef, useState } from "react";
import { SwitcherDivider } from "./components";
import styled from "styled-components";
const Row = styled.div `
	display: flex;
	justify-content: start;
	align-items: center;

	.cds--switcher__item:nth-child(1) {
		margin-block-start: 0;
	}

	&:nth-child(1) {
		margin-block-start: 1rem;
	}

	.cds--overflow-menu-options {
		z-index: 9000 !important;
	}
`;
const C3NavigationSidebarElement = (props) => {
    const sideBarElementRef = useRef(null);
    const [isOverflown, setIsOverflown] = useState(false);
    const { overflowMenu } = props.element;
    const handleSetIsOverflown = () => {
        const element = sideBarElementRef.current;
        setIsOverflown(element ? element.offsetWidth < element.scrollWidth : false);
    };
    useEffect(() => {
        window.addEventListener("resize", handleSetIsOverflown);
        handleSetIsOverflown();
        return () => window.removeEventListener("resize", handleSetIsOverflown);
    }, []);
    return (React.createElement(React.Fragment, null,
        props.element.preceedingDivider && React.createElement(SwitcherDivider, null),
        React.createElement(Row, null,
            React.createElement(Button, { style: {
                    width: overflowMenu
                        ? `calc(14rem - ${props.scrollBarWidth}px)`
                        : `calc(16rem - ${props.scrollBarWidth}px)`,
                    ...(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: sideBarElementRef, title: isOverflown ? props.element.label : "", style: {
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                        width: "100%",
                    } }, props.element.label)),
            overflowMenu)));
};
export default C3NavigationSidebarElement;
