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

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

  componentDidMount() {
    const params = this.props.route.params;
    if (params.id) {
      Dialog.showProgressDialog();
      this.getVehicleData(params.id);
    }
  }

  getVehicleData(id) {
    apiUser.getVehicleById({
      vehiclePk: id
    }).then(res => {
      Dialog.dismissLoading();
      if (res.data) {
        const info = res.data;
        var typeIndex = 0
        TypeImageList.forEach((item, index) => {
          if (item.key == info.connectorType) {
            typeIndex = index;
          }
        })
        this.setState({
          vehicleInfo: info,
          connectorIndex: typeIndex
        });
        this.form = info;
      }
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err)
    });
  }

  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.updateVehicle(params)
  }

  updateVehicle(params) {
    Dialog.showProgressDialog();
    apiUser.updateVehicle(params).then(res => {
      Dialog.dismissLoading();
      toastShort('Update successfully');
      goBack();
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  deleteVehicle() {
    Dialog.showProgressDialog();
    apiUser.deleteVehicle({
      vehiclePk: this.form.vehiclePk
    }).then(res => {
      Dialog.dismissLoading();
      toastShort('Delete successfully');
      goBack();
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  removeVehicle() {
    Dialog.showDialog({
      title: 'Remove Vehicle',
      message: 'Are you sure you want to remove this vehicle?',
      callback: btn => {
        if (btn == 'ok') {
          Dialog.dismissLoading();
          this.deleteVehicle();
        }
      }
    })
  }

  render() {
    return (
      this.state.vehicleInfo.vehiclePk
      ? <View style={styles.container}>
          <View style={styles.formView}>
            <Text style={styles.label}>Brand</Text>
            <TextInput
              style={styles.formInput}
              defaultValue={this.state.vehicleInfo.brand}
              placeholder='Add text'
              placeholderTextColor={textPlacehoder}
              maxLength={25}
              onChangeText={text => this.form.brand = text}
            />
          </View>
          <View style={styles.formView}>
            <Text style={styles.label}>Model</Text>
            <TextInput
              style={styles.formInput}
              defaultValue={this.state.vehicleInfo.model}
              placeholder='Add text'
              placeholderTextColor={textPlacehoder}
              maxLength={50}
              onChangeText={text => this.form.model = text}
            />
          </View>
          <View style={styles.formView}>
            <Text style={styles.label}>License Plate</Text>
            <TextInput
              style={styles.formInput}
              defaultValue={this.state.vehicleInfo.licensePlate}
              placeholder='Add text'
              placeholderTextColor={textPlacehoder}
              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 (
                    <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.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
              style={styles.removeButton}
              text='Remove'
              elevation={1.5}
              onClick={() => {
                this.removeVehicle();
              }}/>
            <Button
              text='Update'
              elevation={1.5}
              onClick={() => {
                this.validate();
              }}/>
          </View>
        </View>
      : <View></View>
    );
  }
}

const styles = VehicleStyles