/**
 * 首页地图工具组件
 * @邠心vbe on 2021/08/13
 */
import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import Button, { ElevationObject } from '../../../components/Button';
import BottomModal from '../../../components/BottomModal';
import Filter from './Filter';
import { PageList } from '../../Router';
import utils from '../../../utils/utils';
import Dialog from '../../../components/Dialog';
import apiStation from '../../../api/apiStation';

export default class MapTool extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showFilter: false,
      filterIndex: {},
      filterTotal: 0,
    };
  }

  componentDidUpdate() {
    if (this.props.count != this.state.filterTotal) {
      this.setState({
        filterTotal: this.props.count
      })
    }
  }

  findFilter(data, index) {
    this.setState({
      filterIndex: index
    });
    this.hideFilter();
    if (this.props.onFilter) {
      this.props.onFilter(data);
    }
  }

  showFilter() {
    this.setState({
      showFilter: true
    });
  }

  hideFilter() {
    this.setState({
      showFilter: false
    });
  }

  getNearestStation() {
    navigator.geolocation.getCurrentPosition(location => {
      let params = {
        lat: location.coords.latitude,
        lng: location.coords.longitude
      }
      Dialog.showProgressDialog();
      apiStation.getNearestSite(params).then(res => {
        Dialog.dismissLoading();
        if (res.data.sitePk) {
          var station = {
            id: res.data.sitePk,
            name: res.data.siteName,
            address: res.data.address,
            latitude: res.data.locationLatitude,
            longitude: res.data.locationLongitude,
          }
          setTimeout(() => {
            utils.directMaps(station.latitude, station.longitude, station.address);
          }, 500);
        } else {
          toastShort("您附近没有充电桩");
        }
      }).catch(err => {
        toastShort(err);
        Dialog.dismissLoading();
      });
    });
  }

  render() {
    return (
      <View>
        <View style={styles.mapToolView}>
          { this.props.mapReady &&
            <TouchableOpacity
              style={styles.mapIcon}
              activeOpacity={0.7}
              onPress={() => this.props.onLocation()}>
              <MaterialIcons
                name='my-location'
                size={26}
                color={colorAccent}/>
            </TouchableOpacity>
          }
          { this.props.mapReady &&
            <TouchableOpacity
              style={styles.mapIcon}
              activeOpacity={0.7}
              onPress={() => {
                this.showFilter()
              }}>
              <FontAwesome
                name='filter'
                size={26}
                color={colorAccent}/>
            </TouchableOpacity>
          }
          <TouchableOpacity
            style={styles.mapIcon}
            activeOpacity={0.7}
            onPress={() => {
              startPage(PageList.scanqr, {actionDetail: true});
            }}>
            <FontAwesome
              name='qrcode'
              size={25}
              color={colorAccent}/>
          </TouchableOpacity>
        </View>

        {/* <View style={styles.bottomView}>
          <Button
            style={styles.bottomButton}
            textSize={17}
            text='Go to Nearest Charging Station'
            onClick={() => {
              this.getNearestStation();
            }
          }/>
        </View> */}
        <BottomModal
          visible={this.state.showFilter}
          onHide={() => {
            this.hideFilter()
          }}>
          <Filter
            index={this.state.filterIndex}
            count={this.state.filterTotal}
            onDone={(data, index) => this.findFilter(data, index)}
            onHide={() => this.hideFilter()}/>
        </BottomModal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mapIcon: {
    width: 50,
    height: 50,
    marginTop: 10,
    borderRadius: 56,
    alignItems: 'center',
    backgroundColor: '#333',
    justifyContent: 'center',
    ...ElevationObject(1),
    shadowColor: '#cccccc'
  },
  mapToolView: {
    right: 24,
    zIndex: 10,
    bottom: 112,
    width: 56,
    position: 'absolute',
    alignItems: 'center'
  },
  bottomView: {
    left: 0,
    right: 0,
    bottom: 32,
    zIndex: 210,
    alignItems: 'center',
    position: 'absolute',
  },
  bottomButton: {
    elevation: 1.5,
    paddingLeft: 32,
    paddingRight: 32,
    borderRadius: 54,
    overflow: 'hidden',
    justifyContent: 'center'
  },
  nearStation: {
    flex: 1,
    paddingLeft: 32,
    paddingRight: 32,
    ...ElevationObject(2),
    justifyContent: 'center',
    backgroundColor: colorAccent
  },
})