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

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

  componentDidMount() {
    //this.getVehicleList();
    this.props.navigation.addListener('focus', () => {
      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)
      }
    });
  }

  removeVehicle(id) {
    Dialog.showDialog({
      title: $t('profile.removeVehicle'),
      message: $t('profile.tipRemoveVehicle'),
      callback: btn => {
        if (btn == 'ok') {
          Dialog.dismissLoading();
          this.deleteVehicle(id);
        }
      }
    })
  }

  deleteVehicle(id) {
    Dialog.showProgressDialog();
    apiUser.deleteVehicle({
      vehiclePk: id
    }).then(res => {
      Dialog.dismissLoading();
      toastShort($t('common.deleteSuccess'));
      this.getVehicleList();
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  render() {
    return (
      this.state.vehicleList.length > 0
      ? this.state.vehicleList.map((item, index) => {
        //const type = getConnectTypeByKey(item.connectorType)
        return (
          <Pressable
            key={index}
            style={styles.vehicleView}
            onPress={() => {
              startPage(PageList.editVehicle, {id: item.vehiclePk});
            }}
            onLongPress={() => {
              if (this.props.onDelete) {
                this.props.onDelete(item.vehiclePk)
              } else {
                this.removeVehicle(item.vehiclePk)
              }
            }}>
            <Image
              resizeMode="contain"
              style={styles.vehicleViewBg}
              source={require('../../images/user/bg-vehicles.png')}/>
            <View style={styles.vehicleRow}>
              <Image
                style={styles.vehicleIcon}
                source={require('../../images/user/ic-vehicle-model.png')}/>
              <TextView style={styles.vehicleName}>{item.brand} {item.model}</TextView>
            </View>
            <TextView style={styles.vehicleModle}>{item.licensePlate}</TextView>
            <View style={styles.vehicleRow}>
              <View style={styles.vehicleTypeRow}>
                <View style={styles.vehicleTypeIcon}>
                  <VehicleType size={10}/>
                </View>
                <TextView style={styles.vehicleType}>TYPE {item.connectorType}</TextView>
              </View>
              {/* <Image
                style={styles.vehicleIcon}
                source={type?.icon}/>
              <Text style={styles.vehicleName}>{type?.name}</Text> */}
            </View>
            <Pressable
              style={styles.closeIcon}
              android_ripple={rippleLess}
              onPress={() => this.removeVehicle(item.vehiclePk)}>
              <MaterialCommunityIcons
                name="close"
                size={20}
                color={textCancel}
              />
            </Pressable>
          </Pressable>
        );
      })
      : <Text style={ui.noData}>{$t('profile.noVehicles')}</Text>
    );
  }
}

const styles = StyleSheet.create({
  vehicleView: {
    borderRadius: 8,
    overflow: 'hidden',
    ...ElevationObject(5),
    ...$margin(16, 16, 0),
    ...$padding(12, 16, 20),
    backgroundColor: colorLight
  },
  vehicleViewBg: {
    right: 8,
    bottom: 8,
    width: 111,
    height: 54,
    position: 'absolute'
  },
  vehicleRow: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  vehicleIcon: {
    width: 32,
    height: 32,
  },
  vehicleName: {
    color: textDark,
    fontSize: 20,
    paddingLeft: 12,
    fontWeight: 'bold'
  },
  vehicleModle: {
    color: textPrimary,
    fontSize: 16,
    paddingLeft: 44,
    paddingTop: 2,
    paddingBottom: 7
  },
  vehicleTypeRow: {
    height: 20,
    marginLeft: 44,
    borderRadius: 4,
    overflow: 'hidden',
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: '#E5EFDE'
  },
  vehicleTypeIcon: {
    width: 20,
    height: 20,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colorAccent
  },
  vehicleType: {
    color: colorAccent,
    fontSize: 13,
    paddingLeft: 6,
    paddingRight: 8,
  },
  closeIcon: {
    top: 0,
    right: 0,
    padding: 12,
    position: 'absolute'
  }
});