/**
 * @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 { ArrayLike } from 'components/common/MapArray';
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';
import { Immutable } from '@findify/store-configuration';


interface ILazyResultsProps {
  theme: any;
  card: React.ComponentType;
  itemConfig?: any;
}

const LazyResults = ({ theme = styles, card = ProductCard, itemConfig }: ILazyResultsProps) => {
  const {
    container,
    onLoadNext,
    onLoadPrev,
    displayPrevButton,
    displayNextButton,
    items,
  } = useLazy();
  const promos = useLazyPromos();
  const { config } = useConfig<Immutable.SearchConfig>();
  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 as ArrayLike,
          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;