import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BadgeSelectItem from '../../components/BadgeSelectItem';
import { PAYTYPE } from '../wallet/Payment';
import { PaymentIcon } from '../wallet/TopupPaythod';
import { ChargeStyle } from './Charging';

export const CHARGE_PAYTYPE = [/*{
  // 按次支付
  name: "Pay Per Use",
  type: PAYTYPE.PAY_PER_USE,
  title: "SGQR",
  icon: "PAYNOW"
}, */{
  // 钱包余额支付
  name: "Credits",
  type: PAYTYPE.CREDIT_WALLET,
  icon: "WALLET",
  balance: true
}]

export const PaymentList = ({isSelect=true, payType, payPerUse, onMethodChange}) => (
  CHARGE_PAYTYPE.map((item, index) => {
    if (isSelect || payType==item.type) {
      return (
        <BadgeSelectItem
          key={index}
          style={ChargeStyle.stationInfoView}
          checked={payType==item.type}
          onPress={() => {
            if (onMethodChange) {
              onMethodChange(item.type);
            }
          }}>
          <PaymentIcon 
            method={item.icon}
            checked={payType==item.type}/>
          <View style={styles.paymentView}>
            <Text style={styles.valueText}>{item.balance ? (currency + userInfo.credit) : item.title}</Text>
            <Text style={styles.paymentText}>{item.name}</Text>
          </View>
        </BadgeSelectItem>
      )
    } else {
      return null
    }
  })
)

const styles = StyleSheet.create({
  paymentView: {
    flex: 1,
    alignItems: 'center'
  },
  valueText: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  paymentText: {
    color: textSecondary,
    fontSize: 12
  }
})