import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { QuitOutlineMd } from '../../../icons/QuitOutlineMd';
import { BottomDrawer } from '../../BottomDrawer';
import { CopyTypography } from '../../CopyTypography';
import { Divider } from '../../Divider';
import { ListItemIcon } from '../../ListItemIcon';
import { ListItemText } from '../../ListItemText';
import { MenuItem as StyledMenuItem } from '../../MenuItem';
import { OverflowTypography } from '../../OverflowTypography';
import { useViewportType } from '../../useViewportType';
import { PROFILE_POPOVER_ID } from '../constants';
import { DisplayNameMenuItem, ExitMenuItem, StyledDivider, StyledMenu, StyledMenuList, } from './styles';
/**
 * Компонент для рендера menu с помощью массива данных
 */
export const MenuList = (props) => {
    const { open, onClose, menuList, exitButton, displayName, annotation, ...restProps } = props;
    const { isMobile } = useViewportType();
    const renderMenuList = () => {
        const items = [];
        items.push(_jsxs(DisplayNameMenuItem, { children: [_jsx(CopyTypography, { noWrap: true, isShowCopyText: true, copyText: displayName, showCopyIcon: "onHover", isOverflow: true, children: displayName }), annotation && (_jsx(CopyTypography, { variant: "caption", color: "grey", colorIntensity: "700", noWrap: true, isShowCopyText: true, showCopyIcon: "onHover", copyText: annotation, isOverflow: true, children: annotation }))] }, "displayName"));
        items.push(_jsx(StyledDivider, {}, "divider"));
        // Добавляем элементы меню
        if (menuList) {
            items.push(...menuList.map(({ render, icon, title, onClick }) => render ? (render({ icon, title, onClick })) : (_jsxs(StyledMenuItem, { onClick: onClick, children: [icon && _jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { children: _jsx(OverflowTypography, { noWrap: true, children: title }) })] }, `menu-item-${title}`))));
        }
        // Добавляем разделитель если есть кнопка выхода и есть элементы menuList до кнопки выхода
        if (exitButton && menuList) {
            items.push(_jsx(Divider, {}, "divider"));
        }
        items.push(_jsxs(ExitMenuItem, { "$exitButton": Boolean(exitButton), onClick: exitButton?.onClick, children: [_jsx(ListItemIcon, { children: _jsx(QuitOutlineMd, {}) }), _jsx(ListItemText, { children: _jsx(OverflowTypography, { noWrap: true, children: "\u0412\u044B\u0439\u0442\u0438" }) })] }, "exit"));
        return items;
    };
    if (isMobile) {
        return (_jsx(BottomDrawer, { id: PROFILE_POPOVER_ID, title: displayName, onClose: onClose, open: open, children: _jsx(StyledMenuList, { children: renderMenuList() }) }));
    }
    return (_jsx(StyledMenu, { MenuListProps: { id: PROFILE_POPOVER_ID }, open: open, onClose: onClose, ...restProps, children: renderMenuList() }));
};
