import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useColorScheme } from '@mui/material/styles';
import { ChevronDownIcon, BarsIcon, ArrowRightToBracketIcon } from '@oxygen-ui/react-icons';
import clsx from 'clsx';
import { forwardRef } from 'react';
import { useIsMobile } from '../hooks/use-is-mobile';
import AppBar from '../AppBar';
import Avatar from '../Avatar';
import Box from '../Box';
import IconButton from '../IconButton';
import Link from '../Link';
import Toolbar from '../Toolbar';
import Typography from '../Typography';
import UserDropdownMenu from '../UserDropdownMenu';

const userDropdownMenuDefaultProps = {
    actionIcon: _jsx(ArrowRightToBracketIcon, {}),
    actionText: 'Logout',
    onActionClick: () => null,
};
/**
 * The Header displays the brand, left aligned elements, right aligned elements, and the user dropdown menu.
 *
 * Demos:
 *
 * - [Header (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-header)
 *
 * API:
 *
 * - [AppBar API](https://mui.com/material-ui/api/app-bar/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [AppBar](https://mui.com/material-ui/api/app-bar//) 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 Header component.
 * @param ref - The ref to be forwarded to the AppBar component.
 * @returns The rendered Header component.
 */
const Header = forwardRef((_a, ref) => {
    var _b, _c;
    var { brand, className, modes, showCollapsibleHamburger, leftAlignedElements, navbarToggleIcon = _jsx(BarsIcon, {}), onCollapsibleHamburgerClick, rightAlignedElements, user, userDropdownMenu = userDropdownMenuDefaultProps } = _a, rest = __rest(_a, ["brand", "className", "modes", "showCollapsibleHamburger", "leftAlignedElements", "navbarToggleIcon", "onCollapsibleHamburgerClick", "rightAlignedElements", "user", "userDropdownMenu"]);
    const userDropdownMenuProps = Object.assign(Object.assign({}, userDropdownMenuDefaultProps), userDropdownMenu);
    const { mode, setMode } = useColorScheme();
    const isMobile = useIsMobile();
    const onModeChange = (selectedMode) => {
        setMode(selectedMode);
    };
    return (_jsx(AppBar, Object.assign({ ref: ref, position: "static", color: "default", variant: "outlined", elevation: 0, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-header', 'OxygenHeader-root', {
            'OxygenHeader-mobile': isMobile,
            'OxygenHeader-withHamburger': showCollapsibleHamburger,
            mobile: isMobile,
            'with-hamburger': showCollapsibleHamburger,
        }, className), role: "banner" }, rest, { children: _jsxs(Toolbar, Object.assign({ className: "OxygenHeader-toolbar oxygen-header-toolbar" }, { children: [showCollapsibleHamburger && (_jsx("div", Object.assign({ className: "OxygenHeader-collapsibleHamburger oxygen-header-collapsibleHamburger" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "Menu Icon", onClick: onCollapsibleHamburgerClick || (() => null) }, { children: navbarToggleIcon })) }))), brand && (_jsxs(Box, Object.assign({ tabIndex: 0, component: brand.onClick ? Link : Box, className: clsx(
                    /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                    'oxygen-brand', 'OxygenHeader-brand', {
                        'OxygenHeader-brandWithLink': Boolean(brand.onClick),
                        'with-link': Boolean(brand.onClick),
                    }), onClick: brand.onClick, color: "inherit" }, (brand.onClick ? { underline: 'none' } : {}), { children: [_jsx(Box, Object.assign({ className: "OxygenHeader-brandLogo oxygen-brand-logo" }, { children: isMobile ? (_b = brand.logo.mobile) !== null && _b !== void 0 ? _b : brand.logo.desktop : brand.logo.desktop })), _jsx(Typography, Object.assign({ variant: "h6", component: "h1", className: "OxygenHeader-brandPortalName oxygen-brand-portal-name" }, { children: brand.title }))] }))), (leftAlignedElements || rightAlignedElements) && (_jsxs(Box, Object.assign({ className: "OxygenHeader-elements oxygen-header-elements" }, { children: [(leftAlignedElements === null || leftAlignedElements === void 0 ? void 0 : leftAlignedElements.length) > 0 && (_jsx(Box, Object.assign({ className: "OxygenHeader-elementsLeft oxygen-header-elements-left" }, { children: leftAlignedElements }))), (rightAlignedElements === null || rightAlignedElements === void 0 ? void 0 : rightAlignedElements.length) > 0 && (_jsx(Box, Object.assign({ className: "OxygenHeader-elementsRight oxygen-header-elements-right" }, { children: rightAlignedElements })))] }))), _jsx(Box, Object.assign({ className: "OxygenHeader-userDropdownMenu oxygen-header-user-dropdown-menu" }, { children: _jsx(UserDropdownMenu, { user: user, triggerOptions: Object.assign({ children: user === null || user === void 0 ? void 0 : user.name, color: 'inherit', endIcon: _jsx(ChevronDownIcon, {}), startIcon: (_jsx(Avatar, Object.assign({ className: "OxygenHeader-userDropdownMenuImage image", alt: "User Image", src: user === null || user === void 0 ? void 0 : user.image, randomBackgroundColor: !(user === null || user === void 0 ? void 0 : user.image), backgroundColorRandomizer: user === null || user === void 0 ? void 0 : user.name }, { children: (_c = user === null || user === void 0 ? void 0 : user.name) === null || _c === void 0 ? void 0 : _c.split('')[0] }))) }, userDropdownMenuProps.triggerOptions), modesHeading: "Theme", modes: modes, onActionTrigger: userDropdownMenuProps.onActionClick, actionText: userDropdownMenuProps.actionText, actionIcon: userDropdownMenuProps.actionIcon, mode: mode, onModeChange: onModeChange, menuItems: userDropdownMenuProps.menuItems, footerContent: userDropdownMenu.footerContent }) }))] })) })));
});
export default Header;
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-header {\n  border-left: none;\n  border-right: none;\n  border-top: none;\n}\n.oxygen-header-collapsible-hamburger {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0 18px;\n}\n.oxygen-header .oxygen-brand {\n  display: flex;\n  align-items: center;\n  min-width: calc(var(--oxygen-customComponents-Navbar-properties-width) - 90px);\n  text-decoration: none;\n  color: inherit;\n  margin-right: 18px;\n}\n.oxygen-header .oxygen-brand-logo {\n  height: 40px;\n  max-width: 100px;\n  display: flex;\n  margin-inline-end: 0.5rem;\n}\n.oxygen-header .oxygen-brand-logo img {\n  width: 100%;\n}\n.oxygen-header .oxygen-brand.with-link {\n  cursor: pointer;\n}\n.oxygen-header-toolbar {\n  min-height: var(--oxygen-customComponents-Header-properties-min-height);\n}\n.oxygen-header.with-hamburger .oxygen-header-toolbar {\n  padding-left: 0;\n  padding-right: 15px;\n}\n.oxygen-header.with-hamburger .oxygen-header-toolbar .oxygen-brand {\n  margin-left: 10px;\n}\n.oxygen-header-elements {\n  display: flex;\n  flex: 1;\n}\n.oxygen-header-elements-left, .oxygen-header-elements-right {\n  display: flex;\n  align-items: center;\n}\n.oxygen-header-elements-left > *, .oxygen-header-elements-right > * {\n  margin-right: 0.5rem;\n}\n.oxygen-header-elements-right {\n  margin-left: auto;\n}\n.oxygen-header-user-dropdown-menu {\n  margin-left: auto;\n}\n.oxygen-header-user-dropdown-menu .image {\n  width: 2.2rem;\n  height: 2.2rem;\n}\n.oxygen-header.mobile .menu-icon-button {\n  margin-right: 0.5rem;\n}");