import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import MuiCollapse from '@mui/material/Collapse';
import { ChevronDownIcon, ChevronUpIcon } from '@oxygen-ui/react-icons';
import clsx from 'clsx';
import { forwardRef, useState } from 'react';
import Box from '../Box';
import Chip from '../Chip';
import List from '../List';
import ListItemButton from '../ListItemButton';
import ListItemIcon from '../ListItemIcon';
import ListItemText from '../ListItemText';
import Tooltip from '../Tooltip';

/**
 * The Collapsible Navbar Item is a custom component that is used to render a collapsible item in the Navbar.
 *
 * Demos:
 *
 * - [Collapsible Navbar Item (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-collapsible-navbar-item)
 *
 * API:
 *
 * - inherits [ListItemButton API](https://mui.com/material-ui/api/list-item-button/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the CollapsibleNavbarItem component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered CollapsibleNavbarItem component.
 */
const CollapsibleNavbarItem = forwardRef((_a, ref) => {
    var { className, expanded, fill, icon, id, open = true, label, onClick, items, tag, tagClassName } = _a, rest = __rest(_a, ["className", "expanded", "fill", "icon", "id", "open", "label", "onClick", "items", "tag", "tagClassName"]);
    const [itemExpanded, setItemExpanded] = useState(expanded || false);
    const handleItemClick = (e) => {
        if (onClick) {
            onClick(e);
        }
        setItemExpanded((prevState) => !prevState);
    };
    const getIsItemSelected = Boolean(items === null || items === void 0 ? void 0 : items.find((item) => item['selected'] === true));
    const renderChevron = () => (itemExpanded ? _jsx(ChevronUpIcon, {}) : _jsx(ChevronDownIcon, {}));
    return (_jsxs(Box, Object.assign({ ref: ref, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-collapsible-navbar-item', {
            [`${fill}`]: fill,
            expanded: itemExpanded,
            fill,
            open,
        }, 'OxygenCollapsibleNavbarItem-root', {
            [`OxygenCollapsibleNavbarItem-${fill}`]: fill,
            'OxygenCollapsibleNavbarItem-expanded': itemExpanded,
            'OxygenCollapsibleNavbarItem-filled': fill,
            'OxygenCollapsibleNavbarItem-opened': open,
        }, className) }, { children: [_jsx(Tooltip, Object.assign({ placement: "right", title: !open && label }, { children: _jsxs(ListItemButton, Object.assign({ selected: getIsItemSelected, className: clsx(
                    /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                    { expanded: itemExpanded, selected: getIsItemSelected }, {
                        'OxygenCollapsibleNavbarItem-expanded': itemExpanded,
                        'OxygenCollapsibleNavbarItem-selected': getIsItemSelected,
                    }), onClick: handleItemClick }, rest, { children: [_jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { primary: label }), _jsxs(Box, Object.assign({ className: clsx(
                            /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                            'oxygen-collapsible-navbar-item-chevrons', 'OxygenCollapsibleNavbarItem-chevrons') }, { children: [' ', renderChevron(), ' '] }))] })) })), _jsx(MuiCollapse, Object.assign({ in: itemExpanded, timeout: "auto", unmountOnExit: true }, { children: _jsx(List, { children: items === null || items === void 0 ? void 0 : items.map((_a) => {
                        var { icon: subItemIcon, selected: subItemSelected, label: subItemName, onClick: subItemOnClick, tag: subItemTag, tagClassName: subItemTagClassName } = _a, otherSubItemProps = __rest(_a, ["icon", "selected", "label", "onClick", "tag", "tagClassName"]);
                        return (_jsx(Tooltip, Object.assign({ placement: "right", title: !open && subItemName }, { children: _jsxs(ListItemButton, Object.assign({ component: "li", selected: subItemSelected, className: clsx(
                                /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                                'oxygen-list-sub-item-button', { selected: subItemSelected }, 'OxygenCollapsibleNavbarItem-subItemButton', { 'OxygenCollapsibleNavbarItem-subItemButtonSelected': subItemSelected }), onClick: subItemOnClick }, otherSubItemProps, { children: [_jsx(ListItemIcon, { children: subItemIcon }), _jsx(ListItemText, { primary: subItemName }), open && subItemTag ? (_jsx(Chip, { label: subItemTag, className: clsx(
                                        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                                        `oxygen-chip-${subItemTag.toLowerCase()}`, `OxygenChip-${subItemTag.toLowerCase()}`, subItemTagClassName), classes: {
                                            /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                                            label: 'oxygen-collapsible-navbar-item-chip-label OxygenCollapsibleNavbarItem-chipLabel',
                                        } })) : null] })) })));
                    }) }) }))] })));
});
export default CollapsibleNavbarItem;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-collapsible-navbar-item {\n  flex-shrink: 0;\n  white-space: nowrap;\n  box-sizing: border-box;\n  border-radius: var(--oxygen-shape-borderRadius);\n  transition: background-color 1s ease-out;\n  margin-top: 5px;\n  margin-bottom: 5px;\n}\n.oxygen-collapsible-navbar-item .oxygen-list {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.oxygen-collapsible-navbar-item.expanded {\n  background-color: var(--oxygen-palette-customComponents-Navbar-collapsibleItemBackground);\n}\n.oxygen-collapsible-navbar-item.selected {\n  background-color: inherit;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button {\n  padding: 6px 13px;\n  border-radius: var(--oxygen-shape-borderRadius);\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button.expanded {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button .oxygen-list-item-icon {\n  min-width: 0;\n  margin-right: auto;\n  justify-content: center;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button .oxygen-list-item-text {\n  opacity: 0;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button.selected {\n  background-color: var(--oxygen-palette-action-selected);\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button.selected::before {\n  content: \"\";\n  height: 80%;\n  width: 5px;\n  background-color: var(--oxygen-palette-primary-main);\n  position: absolute;\n  left: -8px;\n  border-radius: var(--oxygen-shape-borderRadius);\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button.selected.expanded {\n  background-color: inherit;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button.selected.expanded::before {\n  content: none;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-item-button.selected:hover {\n  background: var(--oxygen-palette-action-selected);\n}\n.oxygen-collapsible-navbar-item-chevrons {\n  margin-left: 2.5px;\n}\n.oxygen-collapsible-navbar-item-chevrons svg {\n  width: 10px;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button {\n  border-radius: 0;\n  transition: all 0.2s;\n  padding: 6px 12px;\n  color: var(--oxygen-palette-secondary-contrastText);\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button:last-child {\n  border-bottom-left-radius: var(--oxygen-shape-borderRadius);\n  border-bottom-right-radius: var(--oxygen-shape-borderRadius);\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button .oxygen-list-item-icon {\n  min-width: 0;\n  padding: 0 1px;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button .oxygen-list-item-text {\n  opacity: 0;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button .oxygen-chip {\n  font-size: 10px;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button .oxygen-chip .oxygen-collapsible-navbar-item-chip-label {\n  padding-left: 10px;\n  padding-right: 10px;\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button.selected {\n  background: var(--oxygen-palette-action-selected);\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button.selected:hover {\n  background: var(--oxygen-palette-action-selected);\n}\n.oxygen-collapsible-navbar-item .oxygen-list-sub-item-button.selected::before {\n  content: \"\";\n  height: 80%;\n  width: 5px;\n  background-color: var(--oxygen-palette-primary-main);\n  position: absolute;\n  left: -8px;\n  border-radius: var(--oxygen-shape-borderRadius);\n}\n.oxygen-collapsible-navbar-item.open {\n  background: none;\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-item-button {\n  justify-content: initial;\n  transition: all 0.2s;\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-item-button .oxygen-list-item-icon {\n  margin-right: 10px;\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-item-button .oxygen-list-item-text {\n  opacity: 1;\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-sub-item-button {\n  justify-content: initial;\n  transition: all 0.2s;\n  padding-left: 40px;\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-sub-item-button .oxygen-list-item-icon {\n  margin-right: 10px;\n  width: auto;\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-sub-item-button .oxygen-list-item-text {\n  opacity: 1;\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-sub-item-button.selected {\n  background: var(--oxygen-palette-action-selected);\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-sub-item-button.selected:hover {\n  background: var(--oxygen-palette-action-selected);\n}\n.oxygen-collapsible-navbar-item.open .oxygen-list-sub-item-button.selected::before {\n  content: \"\";\n  height: 80%;\n  width: 5px;\n  background-color: var(--oxygen-palette-primary-main);\n  position: absolute;\n  left: -8px;\n  border-radius: var(--oxygen-shape-borderRadius);\n}\n.oxygen-collapsible-navbar-item.fill.gradient .oxygen-collapsible-navbar-item-collapsible-hamburger svg {\n  fill: var(--oxygen-palette-common-white);\n}\n.oxygen-collapsible-navbar-item.fill.gradient .oxygen-list-item-button {\n  color: var(--oxygen-palette-common-white);\n}\n.oxygen-collapsible-navbar-item.fill.gradient .oxygen-list-item-button::before {\n  background-color: var(--oxygen-palette-common-white);\n}\n.oxygen-collapsible-navbar-item.fill.gradient .oxygen-list-item-button svg {\n  fill: var(--oxygen-palette-common-white);\n}\n.oxygen-collapsible-navbar-item.fill.gradient .oxygen-list-item-button.selected .oxygen-list-item-button {\n  background: var(--oxygen-palette-common-white);\n  color: var(--oxygen-palette-primary-main);\n}\n.oxygen-collapsible-navbar-item.fill.gradient .oxygen-list-item-button.selected .oxygen-list-item-button svg {\n  fill: var(--oxygen-palette-primary-main);\n}");