import React from "react";
import { StyleSheet } from "react-native";
import {
    Card,
    Text,
    Layout,
    Avatar,
    Icon,
    Radio,
} from "@ui-kitten/components";


const styles = StyleSheet.create({
    main: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "transparent",
    },
    avatar: {
        width: 33,
        height: 33,
        backgroundColor: "#eee",
    },
    center: {
        flex: 1,
        marginLeft: 14,
        backgroundColor: "transparent",
    },
    text2: {
        paddingTop: 5,
    },
    code: {
        alignSelf: "flex-start",
    },
    icon: {
        width: 20,
        position: "absolute",
        right: 0,
        top: "50%",
        marginTop: -10,
    },
});

export default function BankCard(props) {
    const { info, disabled, pressEvent, type, selectId } = props;
    const { id, avatar, bankName, cardNo } = info || {};
    const checked = React.useMemo(() => {
        return selectId === id;
    }, [selectId]);
    return (
      <Card appearance='walletCard' disabled={disabled} onPress={pressEvent}>
        <Layout style={styles.main}>
          <Avatar
            style={styles.avatar}
            source={{
                        uri: avatar,
                    }}
          />
          <Layout style={styles.center}>
            <Text category='s1'>{bankName}</Text>
            <Text category='h1' style={styles.text2}>
              {cardNo}
            </Text>
          </Layout>
          {type === "choose" && <Radio checked={checked} />}
          {type === "edit" && !disabled && (
            <Icon
              name='arrow-ios-forward'
              fill='#C9C9C9'
              style={styles.icon}
            />
                )}
        </Layout>
      </Card>
    );
}