import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState, useContext } from 'react';
import { useBreakpoint, useI18n } from '../../hooks';
import Icon from '../Icon';
import SearchInput from '../SearchInput';
import NavigationListItemWrapper from './NavigationListItemWrapper';
import { StyledAppShellSearchButton, StyledAppshellSearchContainer, StyledAppShellSearchDecoration, StyledSearch } from './AppShellSearch.styles';
import AppShellContext from './AppShellContext';
export const AppShellSearch = ({ collapsed, searchLabel, searchInput }) => {
    const btnElRef = useRef(null);
    const formElRef = useRef(null);
    const searchRef = useRef();
    const t = useI18n();
    const [menuOpen, setMenuOpen] = useState(false);
    const isMediumOrAbove = useBreakpoint('md');
    const { navState, mobileNavOpen } = useContext(AppShellContext);
    const onMenuToggle = state => {
        setMenuOpen(state === 'open');
    };
    useEffect(() => {
        const onTab = (e) => {
            if (menuOpen && e.key === 'Tab') {
                e.preventDefault();
                searchRef.current?.focus();
            }
        };
        btnElRef.current?.addEventListener('keydown', onTab);
        return () => {
            btnElRef.current?.removeEventListener('keydown', onTab);
        };
    }, [searchRef, menuOpen]);
    const searchFormProps = {
        role: 'search',
        'aria-label': searchLabel,
        onSubmit: (e) => e.preventDefault()
    };
    return (_jsx(StyledSearch, { collapsed: collapsed, isMediumOrAbove: isMediumOrAbove, children: navState === 'closed' && !mobileNavOpen ? (_jsx(NavigationListItemWrapper, { childElementRef: formElRef, label: t('search_placeholder_default'), tooltipLabel: t('search_placeholder_default'), onMenuToggle: onMenuToggle, content: _jsx(StyledAppshellSearchContainer, { children: _jsx(SearchInput, { ...searchInput, resultsPopover: false, ref: searchRef }) }), children: _jsx("form", { ...searchFormProps, ref: formElRef, children: _jsx(StyledAppShellSearchButton, { "aria-label": t('search'), ref: btnElRef, children: _jsx(StyledAppShellSearchDecoration, { children: _jsx(Icon, { name: 'search' }) }) }) }) })) : (_jsx("form", { ...searchFormProps, children: _jsx(SearchInput, { ...searchInput }) })) }));
};
//# sourceMappingURL=AppShellSearch.js.map