import React, { Component } from 'react';
import { View, Text } from 'react-native';
import apiStation from '../../../api/apiStation';
import Dialog from '../../../components/Dialog';
import utils from '../../../utils/utils';
import VbeClusterMap from 'vbe-cluster-map'
import Button from '../../../components/Button';
import { PageList } from '../../Router';

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 1.3532623163977149,
        longitude: 103.87092316860532,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
        zoom: 10
      },
      stopList: [{
        id: 1,
        latitude: 1.3532623163977149,
        longitude: 103.87092316860532,
        name: "Text",
        available: false
      }],
    };
  }

  viewChargeStation(e) {
    console.log("onMarkerPress", e);
  }

  getGeoLocation() {
    Dialog.showProgressDialog();
    apiStation.getAllStation({}).then(res => {
      Dialog.dismissLoading();
      if (res.data.sites) {
        const list = [];
        res.data.sites.forEach(item => {
          let available = false
          if (item.allConnector && item.allConnector.available) {
            available = true
          }
          list.push({
            id: item.sitePk,
            name: item.siteName,
            //address: item.siteAddress,
            available: available,
            latitude: item.locationLatitude,
            longitude: item.locationLongitude,
            favorite: item?.favorite ? true : false,
            /*acConnector: item.acConnector,
            allConnector: item.allConnector,
            dcConnector: item.dcConnector,*/
            //distance: utils.getDistance(item.distance)
          });
        });
        this.setState({
          stopList: list
        });
      }
    }).catch(err => {
      Dialog.dismissLoading();
      this.setState({
        stopList: []
      });
    })
  }

  render() {
    return (
      <View style={ui.flex1}>
        <View style={[ui.flexc, $padding(8, 16)]}>
          <Text style={ui.flex1}>Vbe Map Test</Text>
          <Button
            style={ui.flex2}
            text="Move"
            onClick={() => {
              if (this.state.mapReady) {
                this.setState({
                  region: {
                    latitude: 1.3532623163977140,
                    longitude: 103.87092316860532,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421,
                    zoom: 17
                  }
                });
              } else {
                this.setState({
                  mapReady: true
                }, () => {
                  this.getGeoLocation();
                });
              }
            }}/>
        </View>
        
        <VbeClusterMap
          style={ui.flex1}
          data={this.state.stopList}
          region={this.state.region}
          animation={true}
          onMapReady={() => {
            this.setState({
              mapReady: true
            }, () => {
              this.getGeoLocation();
            });
          }}
          onMarkerPress={e => this.viewChargeStation(e)}
        />
        <Button
          text="Test Page"
          onClick={() => startPage(PageList.paymentMethod)}
        />
      </View>
    );
  }
}