/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import MapView from 'react-native-maps';
import Constants from 'expo-constants';
import { Container, Fab, Icon, Button } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
import * as Font from 'expo-font';

interface Iprops extends NavigationDrawerScreenProps {
}
export default class App extends Component<Iprops> {
  state = {
    mapRegion: { latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421 },
    locationResult: null,
    active: false,
    location: { coords: { latitude: 37.78825, longitude: -122.4324 } },
  };

  componentDidMount() {
    this._getLocationAsync();
  }

  _handleMapRegionChange = (mapRegion: any) => {
    this.setState({
      locationResult: JSON.stringify(mapRegion),
      location: { coords: { latitude: mapRegion.latitude, longitude: mapRegion.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421 } },
    });
    console.log(mapRegion);
  };

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        locationResult: 'Permission to access location was denied',
        location: {},
      });
    }

    let location = await Location.getCurrentPositionAsync({});
    this.setState({ locationResult: JSON.stringify(location), location, });
  };
  toggleMenu = () => this.props.navigation.toggleDrawer();
  render() {
    return (
      <Container>
        <HeaderCommon title='Google Map' toggleMenu={this.toggleMenu} />
        <View style={styles.container}>
          <MapView
            style={{ alignSelf: 'stretch', minHeight: '100%' }}
            region={{ latitude: this.state.location.coords.latitude, longitude: this.state.location.coords.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
            onRegionChange={this._handleMapRegionChange}
          >
            <MapView.Marker
              coordinate={this.state.location.coords}
              title="My Marker"
              description="Some description"
            />
          </MapView>
          <Text style={{ alignSelf: 'stretch', height: '10%', backgroundColor: 'white', position: 'absolute', bottom: 0 }}>
            Location: {this.state.locationResult}
          </Text>
        </View>
        <Button
          style={styles.fabCss}
          onPress={() => this._getLocationAsync()}>
          <Icon name="pin" />
        </Button>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    backgroundColor: '#ecf0f1',
    paddingTop: 0
  },
  fabCss: {
    backgroundColor: '#5067FF', bottom: 100, position: 'absolute', right: 10, borderRadius: 100
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});
