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 SearchInput from '../SearchInput';
import { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';
import VisuallyHiddenText from '../VisuallyHiddenText';
import { ThemeOverride } from '../Configuration';
import AppShellOperator from './Operator';
import ContextSwitcher from './ContextSwitcher';
import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator } from './AppHeader.styles';
import AppShellContext from './AppShellContext';
import { getHeaderTheme } from './style-utils';
const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, 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]);
    useEffect(() => {
        if (searchPage && searchContainer) {
            setSearchContainerEl(searchContainer);
        }
        else {
            setSearchContainerEl(null);
        }
    }, [searchPage, searchContainer, setSearchContainerEl]);
    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 })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: [_jsx(Image, { src: fullImageSrc || imageSrc, alt: t('application_logo') }), _jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }) }), _jsx(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, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: operator.avatar })] }) }));
});
export default AppHeader;
//# sourceMappingURL=AppHeader.js.map