import React, { Component, useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BadgeSelectItem from '../../components/BadgeSelectItem';
import TextView from '../../components/TextView';
import { getPaymenOptions, PaymentIcon, PAYTYPE } from '../payment/PaymentConfig';
import { ChargeStyle } from './Charging';

export const PaymentList = ({isSelect=true, payType, onMethodChange}) => {
  const [options, setOptions] = useState([])
  useEffect(() => {
    getPaymenOptions(options => {
      setOptions(options)
    })
  }, [])
  return (
    options.map((item, index) => {
      if (isSelect || payType==item.value) {
        return (
          <BadgeSelectItem
            key={index}
            style={ChargeStyle.stationInfoView}
            checked={payType==item.value}
            onPress={() => {
              if (onMethodChange) {
                onMethodChange(item.value);
              }
            }}>
            <PaymentIcon
              method={item.iconFont}
              checked={payType==item.value}/>
            <View style={styles.paymentView}>
              <TextView style={styles.valueText}>{item.value == PAYTYPE.CREDIT_WALLET ? ("" + userInfo?.creditStr) : item.desc}</TextView>
              <TextView style={styles.paymentText}>{item.title}</TextView>
            </View>
          </BadgeSelectItem>
        )
      } else {
        return null
      }
    })
  )
}

const styles = StyleSheet.create({
  paymentView: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row-reverse',
    justifyContent: 'flex-end'
  },
  valueText: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  paymentText: {
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 8,
    paddingRight: 16
  }
})