/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React from 'react';
import {
  Text,
  ListItem,
  Card,
  Left,
  Radio,
  Body,
  Right,
  Thumbnail,
  View,
} from 'native-base';
import styles from './styles';

interface CheckoutcardsProps {
  selectedIndex: number;
  cardDataJson: Array<any>;
  gotoSelectRadio: (index: number) => void;
}

const Checkoutcards = (props: CheckoutcardsProps) => {
  const { selectedIndex, cardDataJson, gotoSelectRadio } = props;

  return (
    <View>
      {cardDataJson.map((item: any, index: number) => (
        <Card key={index} style={styles.checkouCards}>
          <ListItem thumbnail onPress={() => gotoSelectRadio(index)}>
            <Left>
              <Radio
                selected={selectedIndex === index}
                style={styles.radioColor}
              />
            </Left>
            <Body>
              <Text>{item.cardNumber}</Text>
              <Text note>{item.expiryDate}</Text>
              <Text note>{item.type}</Text>
            </Body>
            <Right>
              <Thumbnail square source={item.image} />
            </Right>
          </ListItem>
        </Card>
      ))}
    </View>
  );
};

export default Checkoutcards;
