/**
 * 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 Dialog from '../../components/Dialog';
import ChargeItemSelect from '../../icons/ChargeItemSelect';
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('Please type brand');
      return;
    }
    if (!this.form.model) {
      toastShort('Please type model');
      return;
    }
    if (!this.form.licensePlate) {
      toastShort('Please type license plate');
      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('Add vehicle successfully');
      goBack();
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.formView}>
          <Text style={styles.label}>Brand</Text>
          <TextInput
            style={styles.formInput}
            placeholder='Add text'
            maxLength={25}
            onChangeText={text => this.form.brand = text}
          />
        </View>
        <View style={styles.formView}>
          <Text style={styles.label}>Model</Text>
          <TextInput
            style={styles.formInput}
            placeholder='Add text'
            maxLength={50}
            onChangeText={text => this.form.model = text}
          />
        </View>
        <View style={styles.formView}>
          <Text style={styles.label}>License Plate</Text>
          <TextInput
            style={styles.formInput}
            placeholder='Add text'
            maxLength={20}
            onChangeText={text => this.form.licensePlate = text}
          />
        </View>
        <View style={styles.formView}>
          <Text style={styles.label}>Choose Connecter Type</Text>
          <View style={styles.connectorView}>
            { this.state.connectorType.map((item, index) => {
                return (
                  <Pressable
                    key={index}
                    style={[
                      styles.ctypeView,
                      index==this.state.connectorIndex && styles.actived
                    ]}
                    onPress={() => {
                      this.selectConnector(index);
                    }}>
                    <Image
                      style={styles.typeIcon}
                      source={item.icon}/>
                    <Text style={styles.typeName}>{item.name}</Text>
                    { index==this.state.connectorIndex &&
                      <View style={styles.checkedIcon}>
                        <ChargeItemSelect size={12} selected={true} tint={colorPrimary}/>
                      </View>
                    }
                  </Pressable>
                )
              })
            }
          </View>
        </View>
        <Text style={ui.flex1}></Text>
        <View style={styles.buttonView}>
          <Button
            text='Add Vehicle'
            elevation={1.5}
            onClick={() => {
              this.validate();
            }}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  formView: {
    paddingTop: 16,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 4
  },
  label: {
    color: '#333',
    fontSize: 14
  },
  formInput: {
    color: '#333',
    fontSize: 14,
    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,
    borderColor: '#999',
    alignItems: 'center',
    textAlign: 'center'
  },
  typeIcon: {
    width: 38,
    height: 38
  },
  checkedIcon: {
    width: 12,
    height: 12,
    top: 4,
    right: 4,
    position: 'absolute',
  },
  actived: {
    borderColor: colorPrimary
  },
  typeName: {
    color: '#000',
    fontSize: 15,
    textAlign: 'center',
    paddingTop: 8
  },
  buttonView: {
    padding: 16,
    marginBottom: 16
  },
  removeButton: {
    marginBottom: 16,
    backgroundColor: '#EF5B5B'
  }
});

export const VehicleStyles = styles