/**
 * @module layouts/Autocomplete/Dropdown
 */
import Layout from 'components/autocomplete/Layout';
import { useSuggestions, createConnect, useItems, } from '@findify/react-connect';
import { usePosition } from 'layouts/Autocomplete/Dropdown/trackPosition';
import { useAutocompleteLogic } from 'layouts/Autocomplete/withAutocompleteLogic';
import { useEffect } from 'react';
import styles from 'layouts/Autocomplete/Dropdown/styles.css';
const getContainer = (config) => document.querySelector(config
    .get('cssSelector')
    ?.split(' ')
    .map((i) => `.${i}`)
    .join(''));
const { hook: useAllContent } = createConnect({
    field: 'content',
    mapProps: (field) => ({ content: field }),
});
const hasAvailableContent = (config) => {
    const { content } = useAllContent();
    const { suggestions } = useSuggestions();
    const { items } = useItems();
    const contentKeys = config.get('content')
        ? Object.keys(config.get('content').toJS())
        : [];
    return (items.size ||
        suggestions.size ||
        contentKeys.find((k) => content.get(k).size));
};
export default ({ theme = styles, config, isFullScreen, }) => {
    const { suggestions, meta } = useSuggestions();
    const hasContent = hasAvailableContent(config);
    const { closeAutocomplete } = useAutocompleteLogic();
    const [position, register] = usePosition(config);
    const isTrendingSearches = !meta.get('q');
    useEffect(() => {
        if (!isFullScreen)
            return;
        getContainer(config).classList.add(theme.fullscreen);
    }, []);
    if (!hasContent)
        return null;
    return (<div className={theme.wrapper}>
      <div display-if={config.get('overlay')} className={theme.overlay} onClick={closeAutocomplete}/>
      <section className={theme.root} data-findify-autocomplete={true} tabIndex={0} ref={register} style={{
        [position]: 0,
    }}>
        <Layout className={theme.container} config={config} isTrendingSearches={isTrendingSearches}/>
      </section>
    </div>);
};