/**
 * Add Vehicle页面
 * @邠心vbe on 2021/05/08
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Pressable, Image, TextInput } from 'react-native';
import apiUser from '../../api/apiUser';
import BadgeSelectItem from '../../components/BadgeSelectItem';
import Dialog from '../../components/Dialog';
import { TypeImageList } from '../charge/Charging';

export default class AddVehicle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      connectorIndex: 0,
      connectorType: TypeImageList
    };
    this.form = {}
  }

  selectConnector(index) {
    this.setState({
      connectorIndex: index
    });
  }

  validate() {
    if (!this.form.brand) {
      toastShort($t('profile.msgInputBrand'));
      return;
    }
    if (!this.form.model) {
      toastShort($t('profile.msgInputModel'));
      return;
    }
    if (!this.form.licensePlate) {
      toastShort($t('profile.msgInputPlate'));
      return;
    }
    const params = this.form;
    params.connectorType = this.state.connectorType[this.state.connectorIndex].key
    this.addVehicle(params)
  }

  addVehicle(params) {
    Dialog.showProgressDialog();
    apiUser.addVehicle(params).then(res => {
      Dialog.dismissLoading();
      toastShort($t('common.addSuccess'));
      goBack();
    }).catch((err) => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.formView}>
          <Text style={styles.label}>{$t('profile.vehicleBrand')}</Text>
          <TextInput
            style={styles.formInput}
            allowFontScaling={false}
            placeholder={$t('common.inputAddText')}
            maxLength={25}
            placeholderTextColor={textPlacehoder}
            onChangeText={text => this.form.brand = text}
          />
        </View>
        <View style={styles.formView}>
          <Text style={styles.label}>{$t('profile.vehicleModel')}</Text>
          <TextInput
            style={styles.formInput}
            allowFontScaling={false}
            placeholder={$t('common.inputAddText')}
            maxLength={50}
            placeholderTextColor={textPlacehoder}
            onChangeText={text => this.form.model = text}
          />
        </View>
        <View style={styles.formView}>
          <Text style={styles.label}>{$t('profile.licensePlate')}</Text>
          <TextInput
            style={styles.formInput}
            placeholder={$t('common.inputAddText')}
            maxLength={20}
            placeholderTextColor={textPlacehoder}
            onChangeText={text => this.form.licensePlate = text}
          />
        </View>
        <View style={styles.formView}>
          <Text style={styles.label}>{$t('profile.chooseConnecterType')}</Text>
          <View style={styles.connectorView}>
            { this.state.connectorType.map((item, index) => {
                return (
                  <BadgeSelectItem
                    key={index}
                    style={styles.ctypeView}
                    borderColor={textCancel}
                    checked={index==this.state.connectorIndex}
                    onPress={() => this.selectConnector(index)}>
                    <Image
                      style={styles.typeIcon}
                      source={item.icon}/>
                    <Text style={styles.typeName}>{item.nameScope ? $t(item.nameScope) : item.name}</Text>
                    {/* index==this.state.connectorIndex &&
                      <View style={styles.checkedIcon}>
                        <ChargeItemSelect size={12} selected={true}/>
                      </View>
                    */}
                  </BadgeSelectItem>
                )
              })
            }
          </View>
        </View>
        <Text style={ui.flex1}></Text>
        <View style={styles.buttonView}>
          <Button
            text={$t('profile.addVehicle')}
            elevation={1.5}
            onClick={() => {
              this.validate();
            }}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  formView: {
    paddingTop: 16,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 4
  },
  label: {
    color: textPrimary,
    fontSize: 14
  },
  formInput: {
    color: textPrimary,
    fontSize: 14,
    height: 42,
    paddingBottom: 2,
    borderBottomColor: '#EEE',
    borderBottomWidth: 1
  },
  connectorView: {
    paddingTop: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  ctypeView: {
    minWidth: 90,
    padding: 8,
    borderRadius: 6,
    marginRight: 16,
    marginBottom: 8,
    borderWidth: 1.5,
    alignItems: 'center',
    textAlign: 'center'
  },
  typeIcon: {
    width: 38,
    height: 38
  },
  checkedIcon: {
    width: 12,
    height: 12,
    top: 4,
    right: 4,
    position: 'absolute',
  },
  actived: {
    borderColor: colorAccent
  },
  typeName: {
    color: '#000',
    fontSize: 15,
    textAlign: 'center',
    paddingTop: 8
  },
  buttonView: {
    padding: 16,
    marginBottom: 16
  },
  removeButton: {
    marginBottom: 16,
    backgroundColor: '#EF5B5B'
  }
});

export const VehicleStyles = styles