/**
 * 充电页：扫码认证之后-充电开始之前
 * @邠心vbe on 2023/03/10
 */
import React from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import Button, {ElevationObject} from '../../components/Button';
import TextView from '../../components/TextView';
import { circleSize, DashboardView } from '../chargeV2/Charging';
import { PaymentList } from '../chargeV2/Payment';
import StationInfoView from './StationInfoView';
import PaymentListV2 from '../chargeV2/PaymentListV2';
import app from '../../../app.json';
import PagerUtil from '../chargeV2/PagerUtil';
import utils from '../../utils/utils';
 
export default StepChargeView = ({
  isStart=false,
  isPending,
  isCharging,
  connectorInfo,
  currentPayment,
  curerntPerUser,
  lastUpdated,
  onStartCharge,
  onStopCharge,
  selectedVoucher={},
  onPaymentMethodChanged
}) => (
  <>
    <View style={{minHeight: $vht(80)}}>
      <DashboardView
        isCharging={isCharging}
        connectorInfo={connectorInfo}/>
      <TextView style={styles.title}>{$t('charging.selectedCharger')}</TextView>
      <StationInfoView
        isCharging={isCharging}
        isPending={isPending}
        connectorInfo={connectorInfo}/>
      {/* <BatteryView
        soc={this.state.connectorInfo.batteryPercent}
        isCharging={this.state.isCharging}
        isPending={this.state.isPending}
      /> */}
      {/* <View style={ui.center}>
        <ImageBackground
          style={styles.batteryBorder}
          source={require('../../images/charge/ic-charge-circle.png')}>
          <Text style={{
            color: textPrimary,
            fontSize: 16,
            lineHeight: 22,
            textAlign: 'center'
          }}>
            Press<Text style={{padding: 10, fontWeight: 'bold'}}> Start </Text>to begin Charging
          </Text>
        </ImageBackground>
      </View> */}
      <TextView style={styles.title}>{$t('charging.selectPaymentMethod')}</TextView>
      { app.charge.paymentMethod
      ? <PaymentListV2
          payType={currentPayment}
          isSelect={!isPending && !isCharging}
          chargeBoxId={connectorInfo.chargeBoxId}
          onMethodChange={onPaymentMethodChanged}/>
      : <PaymentList
          payType={currentPayment}
          payPerUse={curerntPerUser}
          onMethodChange={onPaymentMethodChanged}/>
      }
      {/* <PaymentList
        payType={currentPayment}
        payPerUse={curerntPerUser}
        onMethodChange={onPaymentMethodChanged}
      /> */}
      { (app.v3.vouchers && (!isPending || !isCharging || utils.isNotEmpty(selectedVoucher.userVoucherId))) && <>
        <TextView style={styles.title}>{$t('voucher.selectVoucher')}</TextView>
        <Pressable
          style={styles.voucherLayout}
          onPress={() => (!isPending && !isCharging) && PagerUtil.toSelectVoucher(connectorInfo.chargeBoxId, connectorInfo.connectorId)}>
          <MaterialCommunityIcons
            name="ticket-percent"
            size={35}
            color={colorAccent}/>
          { utils.isNotEmpty(selectedVoucher.userVoucherId)
            ? <View style={styles.vouchersView}>
                <TextView
                  style={styles.voucherName}
                  numberOfLines={1}>
                  {selectedVoucher.voucherName}
                </TextView>
                <TextView
                  style={styles.voucherDesc}
                  numberOfLines={1}>
                  {selectedVoucher.voucherDesc}
                </TextView>
              </View>
            : <View style={styles.vouchersView}>
                <TextView style={styles.selectText}>{$t("voucher.selectVoucher")}</TextView>
              </View>
            }
            { (!isPending && !isCharging) &&
              <Lucide
                name={"chevron-right"}
                size={24}
                color={colorCancel}
              />
            }
          </Pressable>
      </>}
      { lastUpdated
        ? <TextView style={styles.updateTip}>{$t('charging.lastUpdatedAt') + lastUpdated + '\n' + $t('charging.pullDownRefresh')}</TextView>
        : <></>
      }
    </View>
    { isStart
    ? <Button
        style={styles.buttonView}
        disabled={isPending}
        text={isCharging ? $t('charging.btnStopCharging') : $t('charging.btnComplete')}
        elevation={1.5}
        onClick={onStopCharge}/>
    : <Button
        style={styles.buttonView}
        text={$t('charging.btnStartCharging')}
        elevation={1.5}
        onClick={onStartCharge}/>
    }
  </>
);
 
const styles = StyleSheet.create({
  title: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 16
  },
  buttonView: {
    marginTop: 16,
    marginBottom: 32
  },
  updateTip: {
    color: '#aaa',
    fontSize: 10,
    textAlign: 'center',
    paddingTop: 32,
    paddingBottom: 16
  },
  listView: {
    padding: 8,
  },
  batteryBorder: {
    margin: 30,
    padding: 32,
    width: circleSize,
    height: circleSize,
    alignItems: 'center',
    justifyContent: 'center'
  },
  voucherLayout: {
    padding: 12,
    borderRadius: 10,
    marginBottom: 12,
    alignItems: 'center',
    flexDirection: 'row',
    ...ElevationObject(5),
    backgroundColor: colorLight,
  },
  vouchersView: {
    flex: 1,
    paddingLeft: 8,
    flexWrap: 'wrap',
    alignItems: 'center',
    flexDirection: 'row'
  },
  selectText: {
    flex: 1,
    color: textSecondary,
    fontSize: 15,
    fontWeight: 'bold'
  },
  voucherName: {
    flex: 1,
    color: textPrimary,
    fontSize: 15,
    paddingLeft: 8,
    fontWeight: 'bold'
  },
  voucherDesc: {
    flex: 1,
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 8,
    paddingRight: 16
  }
})