import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment } from 'react';
import Avatar from '../avatar';
import { useStyleConfig } from '../core';
import List from '../list';
import Popover from '../popover';
import { isJsx, isObject } from '../utils';
import { useHeaderContext } from './context';
import HeaderAccountUserInfo from './headerAccountUserInfo';
/** Disables popper's dynamic re-positioning */
/** Displays user account information and helpful links, like settings or logout. */
export function HeaderAccount(props) {
    const { contentProps, options = {}, sections, triggerProps, userInfo, ...rest } = props;
    const { isMobile } = useHeaderContext();
    const styles = useStyleConfig('Header', useHeaderContext()).account;
    const name = isObject(userInfo) ? userInfo.displayName : '';
    const variant = styles?.trigger?.variant ?? 'solidDarkBlue';
    const offsetX = isMobile ? 64 : 39;
    return (_jsxs(Popover, { isLazy: false, offset: [offsetX, 16], placement: "bottom-end", ...rest, children: [_jsx(Popover.Trigger, { as: Avatar, className: "vui-headerAccountTrigger", isInteractive: true, ml: 1, name: name, role: "button", size: "lg", title: "Account", variant: variant, ...styles.trigger, ...triggerProps }), _jsxs(Popover.Content, { borderRadius: 0, className: "vui-headerAccountContent", column: true, ...styles.content, w: isMobile ? 280 : 320, ...contentProps, children: [isJsx(userInfo) ? userInfo : userInfo && _jsx(HeaderAccountUserInfo, { ...userInfo }), isJsx(sections)
                        ? sections
                        : sections && (_jsx(List, { className: "vui-headerAccountList", mb: 2, children: sections.map(({ heading, links }, index) => (_jsxs(Fragment, { children: [_jsx(List.Divider, {}), heading && _jsx(List.Heading, { text: heading }), links?.map(({ icon, url, ...rest }, index) => (_jsx(List.Item, { iconLeft: icon, linkProps: { href: url }, ...rest }, index)))] }, index))) }))] })] }));
}
HeaderAccount.displayName = 'HeaderAccount';
export default HeaderAccount;
//# sourceMappingURL=headerAccount.js.map