/**
 * @module components/search/LazyResults
 */
import { useConfig, usePagination } from '@findify/react-connect';
import MapArray from 'components/common/MapArray';
import Grid from 'components/common/Grid';
import ProductCard from 'components/Cards/Product';
import Button from 'components/Button';
import Text from 'components/Text';
import useTranslations from 'helpers/useTranslations';
import PromoCard from 'components/Cards/Promo';
import styles from 'components/search/LazyResults/styles.css';
import useLazy from 'helpers/useLazy';
import useLazyPromos from 'helpers/useLazyPromos';
const LazyResults = ({ theme = styles, card = ProductCard, itemConfig }) => {
    const { container, onLoadNext, onLoadPrev, displayPrevButton, displayNextButton, items, } = useLazy();
    const promos = useLazyPromos();
    const { config } = useConfig();
    const { getPageProps, current } = usePagination();
    const translate = useTranslations();
    const promosIndexes = promos.map(promo => promo.get('position')).toJS().sort();
    const productsIndexes = items.map((_, idx) => idx + 1).toJS().filter(i => !promosIndexes.includes(i));
    const lastProductIndex = productsIndexes.at(-1);
    promosIndexes.forEach((_, idx) => productsIndexes.push(lastProductIndex + idx + 1));
    return (<div ref={container} className={theme.root} role="main" aria-label={translate('search.title')} aria-live="polite" tabIndex={0}>
      <div className={theme.buttonContainer} display-if={displayPrevButton}>
        <Button className={theme.prevButton} onClick={onLoadPrev} href={getPageProps(current - 1)?.href}>
          <Text primary lowercase>
            {translate('search.loadPrev')}
          </Text>
        </Button>
      </div>
      <Grid role="list" wrapperComponent="ul" columnComponent="li" aria-label={translate('search.title')} columns={config.getIn(['breakpoints', 'grid'])} gutter={12}>
        {MapArray({
        array: promos,
        factory: PromoCard,
        config: config.get('promo'),
        order: (item) => item.get('position'),
    })}
        {MapArray({
        config: itemConfig || config.get('product'),
        array: items,
        factory: card,
        order: (_, index) => productsIndexes[index],
        isSearch: true
    })}
      </Grid>
      <div className={theme.buttonContainer} display-if={displayNextButton}>
        <Button className={theme.nextButton} onClick={onLoadNext} href={getPageProps(current + 1)?.href}>
          <Text primary lowercase>
            {translate('search.loadMore')}
          </Text>
        </Button>
      </div>
    </div>);
};
export default LazyResults;