/**
 * 新充电流程：充电前的模块
 * @邠心vbe on 2023/06/20
 */
import React from 'react';
import { View, Text, Image, StyleSheet, ScrollView } from 'react-native';
import Button, { ElevationObject } from '../../components/Button';
import TextView from '../../components/TextView';
import { ChargeStyle } from '../chargeV2/Charging';
import { PaymentList } from '../chargeV2/Payment';

export default StepStart = ({
  connectorInfo={},
  currentPayment,
  curerntPerUse,
  onPaymentMethodChanged,
  onAuthenticate
}) => {
  return (
    <ScrollView
      style={ui.flex1}
      contentContainerStyle={$padding(16)}>
      <View style={ui.center}>
        <Image
          style={styles.stepImage}
          resizeMode="contain"
          source={require('../../images/site/charging-status-unknow.png')}/>
        <TextView style={styles.stepTitle}>{$t('charging.stepInsertConnector')}</TextView>
        <TextView style={styles.stepDesc}>{$t('charging.stepInsertConnectorDesc')}</TextView>
      </View>
      <View style={styles.infoRow}>
        <View style={styles.infoCard}>
          <TextView style={styles.infoTitle}>{$t('charging.labelType')}</TextView>
          <TextView
            numberOfLines={1}
            ellipsizeMode="tail"
            style={styles.infoText}>{connectorInfo.chargeType}{connectorInfo.wattage || "AC22"}</TextView>
          <TextView style={styles.infoDesc}></TextView>
        </View>
        <View style={styles.infoCard}>
          <TextView style={styles.infoTitle}>{$t('charging.labelPower')}</TextView>
          <TextView
            numberOfLines={1}
            ellipsizeMode="tail"
            style={styles.infoText}>{connectorInfo.wattage || "0"} kW{/*connectorInfo.rateType*/}</TextView>
          <TextView style={styles.infoDesc}></TextView>
        </View>
      </View>
      <View style={styles.infoRow}>
        <View style={styles.infoCard}>
          <TextView style={styles.infoTitle}>{$t('charging.labelRate')}</TextView>
          {/* <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={styles.infoText}>{connectorInfo.rate || "0.00"}/{connectorInfo.rateType || "kWh"}</Text> */}
          <TextView
            numberOfLines={2}
            ellipsizeMode="tail"
            style={styles.infoText}>{connectorInfo.rates || "S$0.00/kWh"}</TextView>
          <TextView
            numberOfLines={1}
            ellipsizeMode="tail"
            style={styles.infoDesc}>({connectorInfo.userRates || "S$0.00/kWh"})</TextView>
        </View>
        <View style={styles.infoCard}>
          <TextView style={styles.infoTitle}>{$t('charging.labelStatus')}</TextView>
          <TextView
            style={[ChargeStyle.statusAuthenticated, styles.infoStatus]}>
            {$t('charging.statusAvailable')}
          </TextView>
        </View>
      </View>
      <EndView/>
      <EndView half/>
      <TextView style={styles.label}>{$t('charging.paymentMethod')}</TextView>
      <PaymentList
        payType={currentPayment}
        payPerUse={curerntPerUse}
        onMethodChange={onPaymentMethodChanged}
      />
      <Button
        style={styles.buttonView}
        text={$t('charging.btnAuthenticate')}
        elevation={1.5}
        borderRadius={6}
        onClick={onAuthenticate}/>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  stepImage: {
    width: $vw(70),
    height: $vw(16),
    margin: 16
  },
  stepTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: colorAccent
  },
  stepDesc: {
    color: textPrimary,
    fontSize: 16,
    textAlign: 'center',
    ...$padding(0, 32, 48)
  },
  infoRow: {
    marginLeft: 16,
    marginBottom: 16,
    flexDirection: 'row'
  },
  infoCard: {
    flex: 1,
    paddingTop: 12,
    paddingBottom: 12,
    borderRadius: 10,
    marginRight: 16,
    alignItems: 'center',
    ...ElevationObject(5),
    backgroundColor: colorLight,
  },
  infoTitle: {
    color: textPrimary,
    fontSize: 12,
    paddingTop: 1
  },
  infoText: {
    color: textPrimary,
    fontSize: 15,
    textAlign: 'center',
    fontWeight: 'bold',
    ...$padding(12, 6)
  },
  infoDesc: {
    color: textPrimary,
    fontSize: 12,
    marginTop: -12,
    paddingBottom: 8
  },
  infoStatus: {
    fontSize: 16,
    fontWeight: 'bold',
    ...$padding(16, 8)
  },
  label: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    paddingTop: 16,
    paddingBottom: 8
  },
  buttonView: {
    marginTop: 8,
    marginBottom: 16
  }
})