/**
 * 充电页：扫码认证之后-充电开始之前
 * @邠心vbe on 2023/03/10
 */
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Button from '../../components/Button';
import TextView from '../../components/TextView';
import { circleSize, DashboardView } from '../chargeV2/Charging';
import { PaymentList } from '../chargeV2/Payment';
import StationInfoView from './StationInfoView';
 
export default StepStartView = ({
  isStart=false,
  isPending,
  isCharging,
  connectorInfo,
  currentPayment,
  curerntPerUser,
  lastUpdated,
  onStartCharge,
  onStopCharge,
  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>
      <PaymentList
        payType={currentPayment}
        payPerUse={curerntPerUser}
        onMethodChange={onPaymentMethodChanged}
      />
      {/* <Payment 
        refreshId={this.state.refreshId}
        payType={this.state.currentPaytype}
        balance={this.state.curerntPerUser}
        isPayPerUse={this.state.currentPayment == PAYTYPE.PAY_PER_USE}
        onMethodChange={() => this.onMethodChange()}
      /> */}
      { 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'
  }
})