import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';
import Axios from 'axios';


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      address:'',
      latitude:'',
      longitude:'',
      markers:[],
    }
  }


  // componentDidMount() {
  //   console.log(this.state.latitude);
  //   Axios({
  //     method: 'get',
  //     //ip public
  //     url: 'http://202.51.125.114/location/public/api/locations',
  //     dataType: 'json',
  //     headers: {
  //         'Accept': 'application/json',
  //         'Content-Type': 'application/json',
  //         },
  //     })
  //     .then(response => {
  //       console.log(response.data);
  //       this.setState({
  //         markers: response.data.results.locations,
  //       })
  //       console.log(this.state.markers);
  //   })
  //     .catch((error) => {
  //       console.error(error);
  //     });

  // }

  // componentDidMount() {
  //   console.log(this.state.latitude);
  //   Axios({
  //     method: 'get',
  //     //ip leptop
  //     url: 'http://192.268.6.13/location/public/api/locations',
  //     dataType: 'json',
  //     headers: {
  //         'Accept': 'application/json',
  //         'Content-Type': 'application/json',
  //         },
  //     })
  //     .then(response => {
  //       console.log(response.data);
  //       this.setState({
  //         markers: response.data.results.locations,
  //       })
  //       console.log(this.state.markers);
  //   })
  //     .catch((error) => {
  //       console.error(error);
  //     });

  // }

  // componentDidMount() {
  //   console.log(this.state.latitude);
  //   Axios({
  //     method: 'get',
  //     //local
  //     url: 'http://localhost:8000/api/locations',
  //     dataType: 'json',
  //     headers: {
  //         'Accept': 'application/json',
  //         'Content-Type': 'application/json',
  //         },
  //     })
  //     .then(response => {
  //       console.log(response.data);
  //       this.setState({
  //         markers: response.data.results.locations,
  //       })
  //       console.log(this.state.markers);
  //   })
  //     .catch((error) => {
  //       console.error(error);
  //     });

  // }







  render() {
    this.state = {
      markers: [{
        title: 'hi',
        coordinates: {
          latitude: 3.148561,
          longitude: 101.652778
        },
      },
      {
        title: 'hello',
        coordinates: {
          latitude: 3.149771,
          longitude: 101.655449
        },

      },
      {
        title: 'jsa',
        coordinates: {
          latitude: -6.303709,
          longitude: 106.5857977
        },

      },
      {
        title: 'jsa_HO',
        coordinates: {
          latitude: -6.1675273,
          longitude: 106.8208337
        },

      },


      ]
    }
    return (

      <MapView
        style={{ flex: 1 }}
        showsUserLocation={true}
      >
        {this.state.markers.map((marker, index) => (
          <MapView.Marker key={index}
            coordinate={marker.coordinates}
            title={marker.title}
          />
        ))}
      </MapView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});