import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, 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 { BarsIcon } from '@oxygen-ui/react-icons';
import clsx from 'clsx';
import { forwardRef, Fragment } from 'react';
import Box from '../Box';
import CollapsibleNavbarItem from '../CollapsibleNavbarItem';
import Divider from '../Divider';
import Drawer from '../Drawer';
import IconButton from '../IconButton';
import List from '../List';
import NavbarItem from '../NavbarItem';
import Typography from '../Typography';

/**
 * The Navbar component is used to provide a navigation bar for the application.
 *
 * Demos:
 *
 * - [Navvar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-navbar)
 *
 * API:
 *
 * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Drawer](https://mui.com/material-ui/api/drawer/) 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 Navbar component.
 * @param ref - The ref to be forwarded to the Drawer component.
 * @returns The rendered Navbar component.
 */
const Navbar = forwardRef((_a, ref) => {
    var { className, fill, onClose, items, collapsible = true, open = true, onOpen, toggleIcon = _jsx(BarsIcon, {}) } = _a, rest = __rest(_a, ["className", "fill", "onClose", "items", "collapsible", "open", "onOpen", "toggleIcon"]);
    const handleCollapsibleHamburgerClick = (e) => {
        if (open && onClose && typeof onClose === 'function') {
            onClose(e, null);
            return;
        }
        if (onOpen && typeof onOpen === 'function') {
            onOpen();
        }
    };
    const renderDivider = (itemSetIndex, heading) => {
        if (itemSetIndex !== 0 && !heading) {
            return _jsx(Divider, { className: "oxygen-navbar-list-item-divider" });
        }
        if (heading) {
            return (_jsx(Divider, Object.assign({ className: "oxygen-navbar-list-item-divider", classes: { wrapper: 'oxygen-navbar-list-item-divider-wrapper' }, textAlign: "left" }, { children: _jsx(Typography, Object.assign({ variant: "overline" }, { children: heading })) })));
        }
        return null;
    };
    return (_jsxs(Drawer, Object.assign({ ref: ref, variant: "permanent", className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-navbar', 'OxygenNavbar-root', {
            'OxygenNavbar-collapsible': collapsible,
            'OxygenNavbar-fill': fill,
            'OxygenNavbar-open': open,
            collapsible,
            [`OxygenNavbar-${fill}`]: fill,
            [`${fill}`]: fill,
            fill,
            open,
        }, className), onClose: onClose, open: open }, rest, { children: [collapsible && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "OxygenNavbar-collapsibleHamburger oxygen-navbar-collapsible-hamburger" }, { children: _jsx(IconButton, Object.assign({ onClick: handleCollapsibleHamburgerClick, "aria-label": "nav item icon" }, { children: toggleIcon })) })), _jsx(Divider, { className: "OxygenNavbar-collapsibleDivider oxygen-navbar-collapsible-divider" })] })), _jsx(Box, Object.assign({ className: "OxygenNavbar-listBox oxygen-navbar-list-box" }, { children: items === null || items === void 0 ? void 0 : items.map((navbarItems, itemsIndex) => {
                    var _a;
                    const navBarListClass = clsx('OxygenNavbar-list oxygen-navbar-list', {
                        'OxygenNavbar-listNoHeading': !navbarItems.label,
                        'no-heading': !navbarItems.label,
                    });
                    return (_jsxs(Fragment, { children: [_jsx("div", { children: renderDivider(itemsIndex, navbarItems.label) }), _jsx(List, Object.assign({ className: navBarListClass }, { children: (_a = navbarItems === null || navbarItems === void 0 ? void 0 : navbarItems.items) === null || _a === void 0 ? void 0 : _a.map((_a) => {
                                    var { expanded, icon, id, selected, items: navbarSubItems, label, onClick, tag, tagClassName } = _a, otherListItemProps = __rest(_a, ["expanded", "icon", "id", "selected", "items", "label", "onClick", "tag", "tagClassName"]);
                                    return navbarSubItems ? (_jsx(CollapsibleNavbarItem, Object.assign({ component: "li", expanded: expanded, icon: icon, id: id, selected: selected, items: navbarSubItems, label: label, onClick: onClick, tag: tag, tagClassName: tagClassName, fill: fill, open: open }, otherListItemProps))) : (_jsx(NavbarItem, Object.assign({ component: "li", icon: icon, id: id, selected: selected, label: label, onClick: onClick, tag: tag, tagClassName: tagClassName, fill: fill, open: open }, otherListItemProps)));
                                }) }))] }, navbarItems.id));
                }) }))] })));
});
export default Navbar;
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-navbar {\n  width: var(--oxygen-customComponents-Navbar-properties-width);\n  flex-shrink: 0;\n  white-space: nowrap;\n  box-sizing: border-box;\n}\n.oxygen-navbar-list-box {\n  padding: 8px;\n}\n.oxygen-navbar-list-box .oxygen-navbar-list {\n  padding: 5px 0;\n  margin: 0 5px;\n}\n.oxygen-navbar-list-box .oxygen-navbar-list.no-heading {\n  padding: 0;\n}\n.oxygen-navbar .MuiDrawer-paper {\n  background: var(--oxygen-palette-customComponents-Navbar-background);\n}\n.oxygen-navbar:not(.open) {\n  width: calc(var(--oxygen-customComponents-Navbar-properties-mini-variant-width) + 5px);\n  transition: all 0.2s;\n  overflow-x: hidden;\n}\n.oxygen-navbar:not(.open) .oxygen-navbar-list-item-divider-wrapper {\n  display: none;\n}\n.oxygen-navbar:not(.open) .MuiDrawer-paper {\n  width: calc(var(--oxygen-customComponents-Navbar-properties-mini-variant-width) + 5px);\n  transition: all 0.2s;\n  overflow-x: hidden;\n}\n.oxygen-navbar:not(.open) .MuiDrawer-paper .oxygen-navbar-list-item-divider-wrapper {\n  display: none;\n}\n.oxygen-navbar-collapsible-hamburger {\n  display: flex;\n  align-items: center;\n  padding: 0 10px;\n  min-height: var(--oxygen-customComponents-Header-properties-min-height);\n}\n.oxygen-navbar-collapsible-hamburger .oxygen-icon-button {\n  height: 48px;\n  width: 48px;\n}\n.oxygen-navbar-collapsible-divider {\n  margin-bottom: 1rem;\n}\n.oxygen-navbar.open {\n  width: var(--oxygen-customComponents-Navbar-properties-width);\n  transition: all 0.2s;\n  overflow-x: hidden;\n}\n.oxygen-navbar.open .MuiDrawer-paper {\n  width: var(--oxygen-customComponents-Navbar-properties-width);\n  transition: all 0.2s;\n  overflow-x: hidden;\n}\n.oxygen-navbar.fill.gradient .MuiDrawer-paper {\n  background: linear-gradient(90deg, var(--oxygen-palette-gradients-primary-stop1) 0%, var(--oxygen-palette-gradients-primary-stop2) 100%);\n}\n.oxygen-navbar.fill.gradient .oxygen-navbar-collapsible-hamburger svg {\n  fill: var(--oxygen-palette-common-white);\n}\n.oxygen-navbar-list-item-divider {\n  margin: 5px 8px;\n}");