import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useContext, useEffect, useMemo } from 'react';
import Flex from '../Flex';
import Image from '../Image';
import Button from '../Button';
import SearchInput from '../SearchInput';
import { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';
import VisuallyHiddenText from '../VisuallyHiddenText';
import { ThemeOverride } from '../Configuration';
import useThemeMode from '../../hooks/useThemeMode';
import MenuButton from '../MenuButton';
import AppShellOperator from './Operator';
import ContextSwitcher from './ContextSwitcher';
import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator, StyledAppHeaderLogo } from './AppHeader.styles';
import { StyledShareIcon } from './AppShell.styles';
import AppShellContext from './AppShellContext';
import { getHeaderTheme } from './style-utils';
import ThemeSwitcher from './ThemeSwitcher';
const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, imageAltText, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage, headerUtils, helpMenu, shareApp }, ref) {
    const t = useI18n();
    const isMediumOrAbove = useBreakpoint('md');
    const [searchContainer, setSearchContainer] = useElement();
    const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);
    const theme = useTheme();
    const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);
    const shareLabel = shareApp?.label ?? t('app_shell_share');
    useEffect(() => {
        if (searchPage && searchContainer) {
            setSearchContainerEl(searchContainer);
        }
        else {
            setSearchContainerEl(null);
        }
    }, [searchPage, searchContainer, setSearchContainerEl]);
    const { themeMode, onThemeModeChange } = useThemeMode();
    let appInfoAs = 'div';
    if (href)
        appInfoAs = 'a';
    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsxs(Flex, { as: StyledAppHeaderInfo, container: { colGap: 0.5 }, centerLogo: !fullImageSrc, children: [_jsx(Flex, { container: { inline: true, alignItems: 'center' }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [(fullImageSrc || imageSrc) && (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledAppHeaderLogo, children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsxs("div", { children: [_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] })] }) }), headerUtils?.[0]] }), _jsxs(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: [searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})), headerUtils?.[1]] }), onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), helpMenu && (_jsx(MenuButton, { variant: 'simple', icon: 'help', text: t('app_header_help'), iconOnly: true, menu: {
                        items: helpMenu
                    } })), shareApp && (_jsx(Button, { variant: 'secondary', compact: true, onClick: shareApp.onClick, children: _jsxs(Flex, { container: { gap: 0.5, alignItems: 'center' }, children: [_jsx(StyledShareIcon, { name: 'share' }), _jsx("span", { children: shareLabel })] }) })), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }) }));
});
export default AppHeader;
//# sourceMappingURL=AppHeader.js.map