import React, { memo } from 'react';
import { fp as _ } from '../../common/utils/fp';
import { Card } from './card';
import { ErrorBlock } from '../../common/components/error-block';
import { hasNotificationCountry } from '../transducers';
import { TDecoratedTrackNotificationItem, TNotificationParams } from '../types';

type TProps = {
  cards: TDecoratedTrackNotificationItem[];
  onCardPress: (params: TNotificationParams) => void;
  error: string | boolean;
};

export const CardsOpened: React.FC<TProps> = memo(props => {
  const { cards, onCardPress, error } = props;

  return (
    <>
      {!error && Array.isArray(cards)
        ? _.map((o: TDecoratedTrackNotificationItem) => (
            <Card
              key={o.id}
              {...o}
              flagVariant={o.is_new ? 'white' : 'light'}
              variant={o.is_new ? 'new' : 'default'}
              hasCountryCode={hasNotificationCountry(o)}
              onCardPress={onCardPress}
            />
          ))(cards)
        : null}
      {error ? <ErrorBlock mr={0} ml={0} message={error} /> : null}
    </>
  );
});