import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { RenderOnScreen, useStyleConfig } from '../core';
import List from '../list';
import Menu from '../menu';
import { useHeaderContext } from './context';
import HeaderServicesMessage from './headerServicesMessage';
/** Supporting internal component to avoid code duplication. */
function ListContent({ links = [] }) {
    const styles = useStyleConfig('Header', useHeaderContext()).services;
    return (_jsx(_Fragment, { children: links.length > 0 ? (links.map(({ text, url }, index) => (_jsx(Menu.Item, { isTruncated: true, linkProps: { href: url }, text: text, title: text, ...styles.item }, index)))) : (_jsx(HeaderServicesMessage, {})) }));
}
/** Displays a list of services available to the user. */
export function HeaderServices(props) {
    const { buttonProps, isApplication = false, links = [], showTopBorder = false, ...rest } = props;
    const styles = useStyleConfig('Header', useHeaderContext()).services;
    const offsetX = isApplication ? 179 : 135;
    return (_jsxs(_Fragment, { children: [_jsx(RenderOnScreen, { minWidth: "lg", children: _jsxs(Menu, { isLazy: false, offset: [offsetX, 17], placement: "bottom-end", size: "lg", ...rest, children: [_jsx(Menu.Button, { className: "vui-services-trigger", icon: "falTh", ml: 1, size: "lg", title: "My services", ...styles.button, ...buttonProps }), _jsx(Menu.List, { heading: "My Services", maxH: 295, right: 0, w: 320, ...styles.list, children: _jsx(ListContent, { links: links }) })] }) }), _jsx(RenderOnScreen, { maxWidth: "lg", children: _jsx(List, { heading: "My Services", ...styles.list, borderTop: showTopBorder ? 1 : 0, borderTopColor: "sandstone.main", maxH: 295, pt: 1, children: _jsx(ListContent, { links: links }) }) })] }));
}
HeaderServices.displayName = 'HeaderServices';
export default HeaderServices;
//# sourceMappingURL=headerServices.js.map