mapDetails

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import { Button } from 'native-base'
import { task_register } from '../api'
import MapView, { Callout, PROVIDER_GOOGLE , Marker} from 'react-native-maps'
import { Icon } from 'react-native-elements';



class DetailsScreen extends Component {

  static navigationOptions = () => ({
    title: 'وين ناكل',
    headerStyle: {
      backgroundColor: '#0A4E5F'
    },
    headerTintColor: 'white',
    headerRight: <Icon name="menu" size={34} color='#fff' iconStyle={{ marginRight: 15 }}
    />
  })

  state = {
    lat: '',
    lon: '',
    name: '',
    rate: '',
    cat: ''
  }
  async onButtonPressed() {
    const result = await task_register()
    this.setState({
      lat: parseFloat(result.lat),
      lon: parseFloat(result.lon),
      name: result.name,
      rate: result.rating,
      cat: result.cat
    })
    console.log(this.state)
  }


  render() {
    const { result } = this.props.navigation.state.params;
    return (
      <View style={styles.container}>
        <MapView
          style={styles.mapStyle}
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: parseFloat(this.state.lat),
            longitude: parseFloat(this.state.lon),
            latitudeDelta: 0.00 ,
            longitudeDelta: 0.00,
          }}
        >
        {/* <MapView.Marker coordinate ={{latitude: Number(this.state.lat), longitude: Number(this.state.lon)}}/> */}
        </MapView>
        <Callout style={styles.callout}>
          <View style={styles.textsContainerStyle}>
            <Text style={styles.nameStyle}>{this.state.name || result.name}</Text>
            <View style={styles.textsViewStyle}>
              <Text style={styles.textStyle}>{this.state.rate || result.rate}</Text>
              <Text style={styles.textStyle}>{this.state.cat || result.cat}</Text>
            </View>
          </View>
          {/* <View style={styles.buttonView}>
            <Button bordered light
              style={styles.button}
              onPress={this.onButtonPressed.bind(this)}>
              <Text style={styles.buttonText}>اقتراح اخر</Text>
            </Button>
          </View> */}

        </Callout>

      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapStyle: {
    flex: 1,
    width: null,
    height: '100%'
  },
  callout: {
    width: '100%'
  },
  textsContainerStyle: {
    padding: 40,
    backgroundColor: 'rgba(255,255,255,0.7)'
  },
  nameStyle: {
    color: '#0A4E5F',
    fontSize: 30,
    textAlign: 'center',
    alignItems: 'center'
  },
  textsViewStyle: {
    flexDirection: 'row'
  },
  textStyle: {
    color: '#000',
    fontSize: 15,
    textAlign: 'center',
    alignItems: 'center'
  },
  buttonView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginVertical: '115%',
    marginHorizontal: '20%'
  },
  button: {
    width: 200,
    backgroundColor: 'rgba(10,78,95,0.6)',
    borderRadius: 8
  },
  buttonText: {
    textAlign: 'center',
    flex: 1,
    color: '#fff',
    fontSize: 20
  }
});


export default DetailsScreen