import React from 'react';
import { useDispatch } from 'react-redux';

import TransparentDarkBlueButton from '../../src/components/TransparentDarkBlueButton/TransparentDarkBlueButton';

import Promotion from '../../src/components/Promotion/Promotion';

const ListOfPromitions = ({
  selectedPromotions,
  meta,
  getNextPage,
  renderBottomRight,
  onRemove,
  isRemovable,
  displayExpiresAt,
}) => {
  const dispatch = useDispatch();

  const handler = useCallback(
    (data) => {
      dispatch(getNextPage(data, 2));
    },
    [dispatch, meta]
  );

  return (
    <>
      {selectedPromotions.map((selectedPromotion) => {
        const { id, promotion, expiresAt } = selectedPromotion;
        return (
          <Promotion
            key={id}
            promotion={promotion}
            expiresAt={expiresAt}
            isRemovable={isRemovable}
            onRemove={() => onRemove(id)}
            displayExpiresAt={displayExpiresAt}
          >
            {renderBottomRight(selectedPromotion)}
          </Promotion>
        );
      })}
      {meta.totalPages > meta.currentPage ? (
        <div
          style={{
            clear: 'both',
            verticalAlign: 'bottom',
            width: '100%',
            textAlign: 'center',
          }}
        >
          <TransparentDarkBlueButton
            onClick={() => handler(meta.currentPage + 1)}
          >
            View More
          </TransparentDarkBlueButton>
        </div>
      ) : null}
    </>
  );
};

export default ListOfPromitions;