/**
 * 新充电流程：充电前的模块
 * @邠心vbe on 2023/06/20
 */
import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import Button from '../../components/Button';
import TextView from '../../components/TextView';
import StatusImage from './StatusImage';
import ConnectorInfo from './ConnectorInfo';

export default StepStart = ({
  connectorInfo={},
  currentPayment,
  onPaymentMethodChanged,
  onAuthenticate
}) => {
  return (
    <View style={ui.flex1}>
      <ScrollView
        style={ui.flex1}
        contentContainerStyle={$padding(16)}>
        <View style={ui.center}>
          <StatusImage
            isAuthentic={false}/>
          <TextView style={styles.stepTitle}>{$t('charging.stepInsertConnector')}</TextView>
          <TextView style={styles.stepDesc}>{$t('charging.stepInsertConnectorDesc')}</TextView>
        </View>
        <ConnectorInfo connectorInfo={connectorInfo}/>
        <View style={{height: 56}}></View>
      </ScrollView>
      <Button
        style={styles.buttonView}
        text={$t('charging.btnAuthenticate')}
        elevation={1.5}
        borderRadius={6}
        onClick={onAuthenticate}/>
    </View>
  );
}

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, 32)
  },
  buttonView: {
    left: 16,
    right: 16,
    bottom: 24,
    position: 'absolute'
  }
})