brandingConsumer

import React, { useMemo, useContext } from 'react';
import { Image } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { View } from 'react-native';
import { SvgWithCss } from 'react-native-svg';
import { BrandingContext } from 'contexts';
import { actions, selectors } from 'store/cards';

import styles from './styles';

export const CardImage = ({ cards, currentCardImgUrl, currentCardId, cardsLoading }) => {
  const {
    brandingCardImage,
    isBrandedColor,
    brandingCardImageType,
    haveBrandedCardImage,
  } = useContext(BrandingContext);

  const renderBrandedCardImage = useMemo(() => {
    return (
      !!brandingCardImage &&
      (brandingCardImageType === 'svg' ? (
        <View style={styles.image}>
          <SvgWithCss height="100%" width="100%" xml={brandingCardImage} />
        </View>
      ) : (
        <Image resizeMode="contain" source={{ uri: brandingCardImage }} style={styles.image} />
      ))
    );
  }, [brandingCardImage, brandingCardImageType]);

  const renderStandardCardImage = useMemo(
    () =>
      !!currentCardImgUrl && (
        <Image resizeMode="contain" source={{ uri: currentCardImgUrl }} style={styles.image} />
      ),
    [currentCardImgUrl],
  );

  const renderCardImage = useMemo(
    () =>
      isBrandedColor && haveBrandedCardImage ? renderBrandedCardImage : renderStandardCardImage,
    [haveBrandedCardImage, isBrandedColor, renderBrandedCardImage, renderStandardCardImage],
  );

  return (
    <View style={styles.cardContainer}>
      <View style={styles.imageContainer}>{renderCardImage}</View>
    </View>
  );
};

const mapStateToProps = state => ({
  cards: selectors.getCards(state),
  cardsLoading: selectors.getLoading(state),
  currentCardId: selectors.getCurrentCardId(state),
  currentCardImgUrl: selectors.getCurrentCardImgUrl(state),
});

const mapDispatchToProps = {
  sendCardActivationRequest: actions.activateCard,
};

CardImage.propTypes = {
  cards: PropTypes.array,
  cardsLoading: PropTypes.bool,
  currentCardId: PropTypes.number,
  currentCardImgUrl: PropTypes.string,
  sendCardActivationRequest: PropTypes.func,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(CardImage);