/**
 * 车辆列表
 * @邠心vbe on 2021/06/08
 */
import React, { Component } from 'react';
import { View, Text, ImageBackground, Image, StyleSheet, Pressable } from 'react-native';
import apiUser from '../../api/apiUser';
import { ElevationObject } from '../../components/Button';
import { getConnectTypeByKey } from '../charge/Charging';
import { PageList } from '../Router';

export default class VehicleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      vehicleList: [],
      refreshId: 0,
    };
  }

  componentDidMount() {
    this.getVehicleList();
  }

  componentDidUpdate() {
    if (this.state.refreshId != this.props.refreshId) {
      this.setState({
        refreshId: this.props.refreshId,
      });
      this.getVehicleList();
    }
  }

  getVehicleList() {
    apiUser.getVehicles().then(res => {
      if (res.data) {
        this.setState({
          vehicleList: res.data
        });
        if (this.props.onResult) {
          this.props.onResult(res.data.length)
        }
      }
    }).catch(err => {
      this.setState({
        vehicleList: []
      });
      if (this.props.onResult) {
        this.props.onResult(0)
      }
    });
  }

  render() {
    return (
      this.state.vehicleList.length > 0
      ?  this.state.vehicleList.map((item, index) => {
        const type = getConnectTypeByKey(item.connectorType)
        return (
          <Pressable
            key={index}
            onPress={() => {
              startPage(PageList.editVehicle, {id: item.vehiclePk});
            }}
            onLongPress={() => {
              if (this.props.onDelete) {
                this.props.onDelete(item.vehiclePk)
              }
            }}>
            <ImageBackground
              style={styles.vehicleView}
              source={require('../../images/user/bg-vehicles.png')}>
              <View style={styles.vehicleRow}>
                <Image
                  style={styles.vehicleIcon}
                  source={require('../../images/user/ic-vehicle-model.png')}/>
                <Text style={styles.vehicleName}>{item.brand} {item.model}</Text>
              </View>
              <Text style={styles.vehicleModle}>{item.licensePlate}</Text>
              <View style={styles.vehicleRow}>
                <Image
                  style={styles.vehicleIcon}
                  source={type?.icon}/>
                <Text style={styles.vehicleName}>{type?.name}</Text>
              </View>
            </ImageBackground>
          </Pressable>
        );
      })
      : <Text style={ui.noData}>No Vehicles</Text>
    );
  }
}

const styles = StyleSheet.create({
  vehicleView: {
    padding: 20,
    borderRadius: 10,
    overflow: 'hidden',
    marginBottom: 16,
    ...ElevationObject(1.5)
  },
  vehicleRow: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  vehicleIcon: {
    width: 20,
    height: 20,
  },
  vehicleName: {
    color: '#000',
    fontSize: 14,
    paddingLeft: 12
  },
  vehicleModle: {
    color: '#333',
    fontSize: 12,
    paddingLeft: 32,
    paddingTop: 2,
    paddingBottom: 7
  },
});