/**
 * 钱包卡片组件
 * @邠心vbe on 2025/01/17
 */
import React from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { View } from 'react-native';
import { ElevationObject } from '../../components/Button';
import Dialog from '../../components/Dialog';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';
import { toTopupPage } from '../payment/PaymentConfig';

const ViewWallet = ({
  wallet,
  setDefault
}) => {
  const dialogText = "A temporary hold of {mm} is placed for standard sessions. For sites with idle fees, an additional hold of the Idle Fee Cap of the site (e.g. S$30.00) may apply."
  return (
    <View style={styles.cardWallet}>
      <View style={ui.flex}>
        <TextView style={styles.walletName} numberOfLines={2}>{wallet.walletTypeName}</TextView>
        { wallet.defaultPaymentMethod
        ? <View style={styles.defaultView}>
            <MaterialCommunityIcons
              name="credit-card-check-outline"
              size={18}
              color={textButton}/>
            <TextView style={styles.defaultText}>Default</TextView>
          </View>
        : <Pressable
            style={styles.setDefaultView}
            onPress={setDefault}>
            <MaterialCommunityIcons
              name="credit-card-edit-outline"
              size={18}
              color={textButton}/>
            <TextView style={styles.defaultText}>Set Default</TextView>
          </Pressable>
        }
      </View>
      <TextView style={styles.walletProvider}>{wallet.walletPrincipalName}</TextView>
      { wallet?.walletTypeCode.indexOf("pay_per_use") >= 0
      ? <TextView style={styles.walletLabel}>Pre-Auth Amount:</TextView>
      : <TextView style={styles.walletLabel}>Current Balance:</TextView>
      }
      <View style={ui.flexc}>
        <TextView style={styles.walletBalance}>{wallet.currentBalance}</TextView>
        { wallet?.walletTypeCode.indexOf("pay_per_use") >= 0 &&
          <Pressable
            style={styles.walletBalanceInfo}
            onPress={() => {
              let msg = dialogText.replace("{mm}", wallet.currentBalance);
              Dialog.showResultDialog(msg, "OK", null);
            }}>
            <MaterialCommunityIcons
              name="information-outline"
              size={18}
              color={textButton}/>
          </Pressable>
        }
      </View>
      { utils.isNotEmpty(wallet.expiresDate) &&
        <TextView style={styles.walletLabel}>Expires {wallet.expiresDate}</TextView>
      }
      { wallet.walletTypeCode == "credit_wallet" &&
        <View style={styles.topupView}>
          <Pressable
            style={styles.setDefaultView}
            onPress={() => toTopupPage()}>
            <MaterialCommunityIcons
              name="credit-card-plus-outline"
              size={18}
              color={textButton}/>
            <TextView style={styles.defaultText}>{$t("wallet.topUp")}</TextView>
          </Pressable>
        </View>
      }
    </View>
  );
}

export default ViewWallet;

const styles = StyleSheet.create({
  cardWallet: {
    height: 230,
    margin: 16,
    padding: 16,
    borderRadius: 16,
    ...ElevationObject(2),
    backgroundColor: colorPrimary
  },
  walletName: {
    flex: 1,
    color: textLight,
    fontSize: 28,
    fontWeight: 'bold',
    paddingRight: 16
  },
  walletProvider: {
    color: textLight,
    fontSize: 22,
  },
  walletLabel: {
    color: textLight,
    opacity: .9,
    fontSize: 16,
    paddingTop: 16
  },
  walletBalance: {
    color: textLight,
    fontSize: 24,
    paddingTop: 4,
    fontWeight: 'bold'
  },
  walletBalanceInfo: {
    width: 24,
    height: 20,
    opacity: .8,
    marginTop: 4,
    marginLeft: 4,
    alignItems: "center"
  },
  setDefaultView: {
    height: 28,
    ...$padding(4, 12),
    borderRadius: 16,
    alignItems: 'center',
    flexDirection: 'row',
    ...ElevationObject(2),
    backgroundColor: 'rgba(0,0,0,.9)'
  },
  defaultView: {
    height: 28,
    ...$padding(4, 12),
    borderRadius: 16,
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: 'rgba(0,0,0,.5)'
  },
  defaultText: {
    color: textLight,
    fontSize: 13,
    paddingLeft: 4
  },
  topupView: {
    paddingTop: 16,
    flexDirection: 'row'
  }
})