import { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, Alert, Platform } from 'react-native';
import { Icon } from 'native-base'; // 추가된 코드
import React from 'react'
import {Marker} from 'react-native-maps'
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import MapView from "../ClusteredMapView";

import Share from 'react-native-share';
const url = 'https://awesome.contents.com/';
const title = 'Awesome Contents';
const message = 'Please check this out.';
const icon = 'data:<data_type>/<file_extension>;base64,<base64_data>';
const options = Platform.select({
  ios: {
    activityItemSources: [
      { // For sharing url with custom title.
        placeholderItem: { type: 'url', content: url },
        item: {
          default: { type: 'url', content: url },
        },
        subject: {
          default: title,
        },
        linkMetadata: { originalUrl: url, url, title },
      },
      { // For sharing text.
        placeholderItem: { type: 'text', content: message },
        item: {
          default: { type: 'text', content: message },
          message: null, // Specify no text to share via Messages app.
        },
        linkMetadata: { // For showing app icon on share preview.
           title: message
        },
      },
      { // For using custom icon instead of default text icon at share preview when sharing with message.
        placeholderItem: {
          type: 'url',
          content: icon
        },
        item: {
          default: {
            type: 'text',
            content: `${message} ${url}`
          },
        },
        linkMetadata: {
           title: message,
           icon: icon
        }
      },
    ],
  },
  default: {
    title,
    subject: title,
    message: `${message} ${url}`,
  },
});

export default class MainScreen extends Component {
 
  // navigationOptions 코드 추가
  static navigationOptions = {
    headerLeft: <Icon name='ios-camera' style={{ paddingLeft:10 }}/>,
    title: 'PME Service',
    headerRight: <Icon name='ios-send' style={{ paddingRight:10 }}/>,
  }
  constructor(props) {
      super(props)
      this.state= {
          location:null,
          errorMsg:null
      }
  }
  componentDidMount() {
    (async () => {
        let { status } = await Location.requestPermissionsAsync();
        if (status !== 'granted') {
            this.setState({
                errorMsg:'Permission to access location was denied'
            })
        }
  
        let location = await Location.getCurrentPositionAsync({});
        console.log(location)
        this.setState({
            location
        },() => {
            console.log(this.state.location.coords.latitude)
        })
      })();
  }
  render() {
    return (
        this.state.location?
        <View style={{width:"100%",height:"100%"}}>
          
        <MapView 
        style={{ flex: 1 }} 
        initialRegion={ { latitude: this.state.location.coords.latitude, longitude: this.state.location.coords.longitude 
            ,latitudeDelta: 0.0922, longitudeDelta: 0.0421}} 
            zoomEnabled={true}
            pitchEnabled={true}
            showsUserLocation={true}
            followsUserLocation={true}
            showsCompass={true}
            showsBuildings={true}
            showsTraffic={true}
            showsIndoors={true}
            extent={512}> 
            <Marker coordinate={{ latitude: this.state.location.coords.latitude+0.1, longitude: this.state.location.coords.longitude  }} >
                <Image style={{width:54,height:54}} source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker coordinate={{ latitude: this.state.location.coords.latitude+0.5, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker icon="../../assets/marker.png" coordinate={{ latitude: this.state.location.coords.latitude+0.0001, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker icon="../../assets/marker.png" coordinate={{ latitude: this.state.location.coords.latitude+0.0003, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker icon="../../assets/marker.png" coordinate={{ latitude: this.state.location.coords.latitude+0.03, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker icon="../../assets/marker.png" coordinate={{ latitude: this.state.location.coords.latitude+0.05, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker icon="../../assets/marker.png" coordinate={{ latitude: this.state.location.coords.latitude+0.01, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker icon="../../assets/marker.png" coordinate={{ latitude: this.state.location.coords.latitude+0.2, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker icon="../../assets/marker.png" coordinate={{ latitude: this.state.location.coords.latitude+0.3, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            <Marker icon="../../assets/marker.png" coordinate={{ latitude: this.state.location.coords.latitude+0.7, longitude: this.state.location.coords.longitude  }}>
                <Image style={{width:54,height:54}}  source={require('../../assets/marker.png')}/>
            </Marker>
            
          </MapView>
          <TouchableOpacity onPress={() => Alert.alert('OK',"주변에 의심자가 있습니까?",[{text:"OK",onPress:() =>Share.open(options)},{text:'cancel'}])} style={{position:"absolute",bottom:10,right:10, width:50,height:50,backgroundColor:"red",borderRadius:100}}>
              <View style={{flex:1,justifyContent: 'center',alignItems: 'center'}}>
              <Image style={{width:22,height:22}} source={require('../../assets/security.png')}/>
              </View>
          </TouchableOpacity>
          </View>
          :<Text>Loading..</Text>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});