/**
 * @module layouts/Search
 */
import { useEffect } from 'react';
import DesktopFacets from 'components/search/DesktopFacets';
import MobileActions from 'components/search/MobileActions';
import DesktopActions from 'components/search/DesktopActions';
import Branch from 'components/common/Branch';
import Banner from 'components/Banner';
import Grid, { Column } from 'components/common/Grid';
import { useMobile } from 'helpers/useMobile';
import { useAnnouncement } from 'components/common/Announcement';
import useScrollOnChange from 'helpers/useScrollOnChange';
import { useItems } from '@findify/react-connect';
import useTranslations from 'helpers/useTranslations';
import styles from 'layouts/Search/styles.css';
import SearchResultsLayout from 'components/search/SearchResultsLayout';
const Search = ({ isCollection, theme = styles }) => {
    const { items, config } = useItems();
    const translate = useTranslations();
    const isMobile = useMobile();
    const [announcement, setAnnouncement] = useAnnouncement();
    useScrollOnChange(items);
    useEffect(() => setAnnouncement(translate('search.accessibleUpdate')), [
        items,
    ]);
    if (!items.size)
        return null;
    return (<>
      <Grid className={theme.root} gutter={40} columns={config.getIn(['facets', 'position']) === 'top'
        ? 'full'
        : config.getIn(['breakpoints', 'layout'], 'fit|auto')}>
        <Column display-if={!isMobile} order={config.getIn(['facets', 'position']) === 'right' && 2}>
          <DesktopFacets />
        </Column>
        <>
          <Branch isCollection={isCollection} condition={isMobile} left={MobileActions} right={DesktopActions}/>
          <Banner />
          <SearchResultsLayout condition={config.getIn(['pagination', 'type'])}/>
        </>
      </Grid>
      {announcement}
    </>);
};
export default process.env.HOT
    ? require('react-hot-loader').hot(module)(Search)
    : Search;