import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 ListSubheader from '@mui/material/ListSubheader';
import { capitalize } from '@mui/material/utils';
import clsx from 'clsx';
import { forwardRef, useState } from 'react';
import Avatar from '../Avatar';
import Button from '../Button';
import Divider from '../Divider';
import ListItem from '../ListItem';
import ListItemAvatar from '../ListItemAvatar';
import ListItemIcon from '../ListItemIcon';
import ListItemText from '../ListItemText';
import Menu from '../Menu';
import MenuItem from '../MenuItem';
import Radio from '../Radio';

/**
 * The User Dropdown Menu lets you display a dropdown menu with user information and actions.
 *
 * Demos:
 *
 * - [UserDropdownMenu (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-image)
 *
 * API:
 *
 * - inherits [Menu API](https://mui.com/material-ui/api/menu/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the native component are also available.
 * - FIXME: ⚠️ `component` prop is temporarily not supported due to https://github.com/wso2/oxygen-ui/issues/283
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @param props - The props for the UserDropdownMenu component.
 * @param ref - The ref to be forwarded to the Menu component.
 * @returns The rendered UserDropdownMenu component.
 */
const UserDropdownMenu = forwardRef((_a, ref) => {
    var _b;
    var { className, children, footerContent, triggerOptions, user, modes, mode, onUserProfileNavigation, modesHeading, actionText, actionIcon, onModeChange, onActionTrigger, menuItems } = _a, rest = __rest(_a, ["className", "children", "footerContent", "triggerOptions", "user", "modes", "mode", "onUserProfileNavigation", "modesHeading", "actionText", "actionIcon", "onModeChange", "onActionTrigger", "menuItems"]);
    const [anchorEl, setAnchorEl] = useState(null);
    const openMenu = Boolean(anchorEl);
    const handleModeChange = (selectedMode) => {
        onModeChange(selectedMode);
    };
    const onCloseMenu = () => {
        setAnchorEl(null);
    };
    const handleUserProfileNavigation = () => {
        onCloseMenu();
        if (onUserProfileNavigation) {
            onUserProfileNavigation();
        }
    };
    const handleActionTrigger = () => {
        onCloseMenu();
        if (onActionTrigger) {
            onActionTrigger();
        }
    };
    const handleOpenUserMenu = (event) => {
        setAnchorEl(event.currentTarget);
    };
    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "aria-controls": openMenu ? 'oxygen-button-menu' : undefined, "aria-haspopup": "true", onClick: handleOpenUserMenu }, triggerOptions)), _jsxs(Menu, Object.assign({ ref: ref, open: openMenu, anchorEl: anchorEl, className: clsx(
                /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                'oxygen-user-dropdown-menu', 'OxygenUserDropdownMenu-root', className), id: "oxygen-button-menu", onClose: onCloseMenu, PaperProps: { className: 'OxygenUserDropdownMenu-paper oxygen-user-dropdown-menu-paper' } }, rest, { children: [children, user && (_jsxs(ListItem, Object.assign({ className: clsx('oxygen-user-dropdown-menu-list-item', 'OxygenUserDropdownMenu-user', {
                            'OxygenUserDropdownMenu-userClickable': onUserProfileNavigation,
                            clickable: onUserProfileNavigation,
                        }), onClick: () => handleUserProfileNavigation() }, { children: [_jsx(ListItemAvatar, Object.assign({ className: "OxygenUserDropdownMenu-userAvatarWrapper" }, { children: _jsx(Avatar, Object.assign({ src: user === null || user === void 0 ? void 0 : user.image, alt: "User", randomBackgroundColor: !(user === null || user === void 0 ? void 0 : user.image), backgroundColorRandomizer: user === null || user === void 0 ? void 0 : user.name, className: "OxygenUserDropdownMenu-userAvatar" }, { children: (_b = user === null || user === void 0 ? void 0 : user.name) === null || _b === void 0 ? void 0 : _b.split('')[0] })) })), _jsx(ListItemText, { primary: user === null || user === void 0 ? void 0 : user.name, secondary: user === null || user === void 0 ? void 0 : user.email, className: "OxygenUserDropdownMenu-userLabel" })] }))), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0 ? menuItems : null, (modes === null || modes === void 0 ? void 0 : modes.length) > 0 && (_jsxs("div", { children: [_jsx(ListSubheader, Object.assign({ className: "OxygenUserDropdownMenu-themeToggleSubHeader" }, { children: modesHeading })), modes === null || modes === void 0 ? void 0 : modes.map((theme) => {
                                const { name, icon } = theme;
                                return (_jsxs(MenuItem, Object.assign({ className: "OxygenUserDropdownMenu-themeToggle oxygen-user-dropdown-menu-item", onClick: () => handleModeChange(name) }, { children: [_jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { primary: capitalize(name) }), _jsx(Radio, { className: "OxygenUserDropdownMenu-themeToggleRadio oxygen-user-dropdown-menu-item-radio", checked: mode === name, onChange: () => handleModeChange(name), value: name, name: "radio-buttons", inputProps: { 'aria-label': `mode-label-${name}` } })] }), name));
                            })] })), actionText && (_jsxs(MenuItem, Object.assign({ className: "OxygenUserDropdownMenu-actionItem dropdown-menu-item", onClick: () => handleActionTrigger() }, { children: [_jsx(ListItemIcon, { children: actionIcon }), _jsx(ListItemText, { primary: actionText })] }))), footerContent && (_jsxs(_Fragment, { children: [_jsx(Divider, { variant: "middle" }), _jsx("div", Object.assign({ className: "OxygenUserDropdownMenu-footer oxygen-user-dropdown-menu-footer" }, { children: footerContent }))] }))] }))] }));
});
export default UserDropdownMenu;
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-user-dropdown-button {\n  min-height: 45px;\n}\n\n.oxygen-user-dropdown-menu .MuiMenu-paper {\n  min-width: 250px;\n  border-radius: 16px;\n}\n.oxygen-user-dropdown-menu-list-item.clickable {\n  cursor: pointer;\n}\n.oxygen-user-dropdown-menu-item-radio {\n  padding: 0;\n}\n.oxygen-user-dropdown-menu-footer {\n  padding: 8px 16px;\n  display: flex;\n  justify-content: center;\n}\n.oxygen-user-dropdown-menu .oxygen-menu-item {\n  margin: 0.2rem 0.5rem;\n  border-radius: 8px;\n}\n.oxygen-user-dropdown-menu .oxygen-divider {\n  margin-top: 0.5em;\n  margin-bottom: 0;\n}");