import React,{ Component } from 'react'

import {View,Text,RefreshControl,Image,ScrollView,Dimensions,TextInput,TouchableOpacity,StatusBar,StyleSheet} from 'react-native'
import { post, get, put, delete as remove } from 'axios'

import * as Location from 'expo-location';
import { Icon } from 'native-base'; // 추가된 코드
import MapView, { Marker, Polyline } from "react-native-maps";
import Fake_Marker from '../../assets/marker.svg'
import MapApi from "react-native-daummap";
import AsyncStorage from '@react-native-community/async-storage'
import Modal from 'react-native-modal'
import Search from '../../assets/search.svg'
class MainPage extends Component {

    state = {
        refreshing:false,
    }

    constructor(props) {
        super(props)
        this.state= {
            location:null,
            errorMsg:null,
            latitude:0,
            longitude:0,
            current:"",
            isModalVisible:false,
            detail:"",
            road_address:"",
            address:"",
            search:"",
            isSearching:false,
            searchLatitude:0,
            searchLongitude:0,
        }
    }
    componentDidMount() {
        
        if(this.props.navigation.state.params && this.props.navigation.state.params.item) {
            this.setState({
                latitude:this.props.navigation.state.params.item.lat,
                longitude:this.props.navigation.state.params.item.lng
            })
        }
        if(this.props.navigation.state.params && this.props.navigation.state.params.address) {
            MapApi.serachAddress(this.props.navigation.state.params.address,1,1).then(res => {
                this.setState({
                    location:{
                        coords: {
                            latitude: parseFloat(res.documents[0].y),
                            longitude:parseFloat(res.documents[0].x)
                        }
                    },
                    latitude:parseFloat(res.documents[0].y),
                    longitude:parseFloat(res.documents[0].x)
                })
            })
        }
        else {
            (async () => {
            let location = await Location.getCurrentPositionAsync({});

            MapApi.getCoordToAddress(location.coords.latitude,location.coords.longitude).then(res => {
                if(res.documents[0].road_address) {
                    var temp = res.documents[0].road_address.address_name + " (" + res.documents[0].address.region_3depth_name + " " +res.documents[0].address.main_address_no 
                    res.documents[0].address.sub_address_no? temp+=("-" +res.documents[0].address.sub_address_no):undefined
                    temp+=")"    
                }
                else {
                    var temp = res.documents[0].address.address_name
                }
                this.setState({
                    current:temp,
                    road_address:res.documents[0].road_address.address_name,
                    address:res.documents[0].address.address_name
                })

            })
            this.setState({
                location,
                latitude:location.coords.latitude,
                longitude:location.coords.longitude
            },() => {
            })
        
        })();
    }
    }

    getCurrentPosition = () => {
        MapApi.getCoordToAddress(this.state.latitude,this.state.longitude).then(res => {
            if(res.documents[0].road_address) {
                var temp = res.documents[0].road_address.address_name + " (" + res.documents[0].address.region_3depth_name + " " +res.documents[0].address.main_address_no 
                res.documents[0].address.sub_address_no? temp+=("-" +res.documents[0].address.sub_address_no):undefined
                temp+=")"
            }
            else {
                var temp = res.documents[0].address.address_name
            }
            this.setState({
                current:temp,
                address:res.documents[0].address.address_name,
                road_address:res.documents[0].road_address? res.documents[0].road_address.address_name:""
            })
        })
    }
    savePosition = () => {
        if(!this.state.detail) return alert("모든 항목을 입력해주세요.")
        AsyncStorage.getItem("LikeAddress",(err,res) => {
            if(!res) {
                AsyncStorage.setItem("LikeAddress",JSON.stringify([{lat:this.state.latitude,lng:this.state.longitude,address:this.state.address,road_address:this.state.road_address,current:this.state.current,date:new Date(),name:this.state.detail}]))
            }
            else {
                if(this.props.navigation.state.params && this.props.navigation.state.params.item) {
                    const temp = JSON.parse(res)
                    temp[this.props.navigation.state.params.index] = {lat:this.state.latitude,lng:this.state.longitude,address:this.state.address,road_address:this.state.road_address,current:this.state.current,date:new Date(),name:this.state.detail}
                    AsyncStorage.setItem("LikeAddress",JSON.stringify(temp))
                }
                else {
                    const temp = JSON.parse(res)
                    AsyncStorage.setItem("LikeAddress",JSON.stringify(temp.concat([{lat:this.state.latitude,lng:this.state.longitude,address:this.state.address,road_address:this.state.road_address,current:this.state.current,date:new Date(),name:this.state.detail}])))
                }
            }
        })
        this.setState({
            isModalVisible:false
        })
        this.props.navigation.navigate('Main_')
    }
    
    searchAddress = (e) => {
        if(e.nativeEvent.target) {
            MapApi.serachAddress(this.state.search).then(res => {
                this.setState({
                    isSearching:true
                },() => {
                    this.setState({
                        searchLongitude:parseFloat(res.documents[0].x),
                        searchLatitude:parseFloat(res.documents[0].y),
                        longitude:parseFloat(res.documents[0].x),
                        latitude:parseFloat(res.documents[0].y),
                        
                        search:res.documents[0].address.address_name,
                    },() => {
                        this.setState({
                            isSearching:false
                        })
                    })

                })
            })
        }
    }
    render() {

        return (
            <View style={{height:"100%",width:"100%",backgroundColor:"transparent"}}>
            <View style={{display:"flex",flexDirection:"row", height:"8%",backgroundColor:"#5f6161",alignItems:"center"}}>
                <Icon name="ios-arrow-back" style={{color:"#f4cd37", paddingLeft:10}}/>
                <Text style={{fontSize:17,color:"white",paddingLeft:10}}>위치 설정</Text>
            </View>
                
                {this.state.location || this.state.latitude?
                <View style={{width:"100%",height:"84%"}}>
                
                <View style={{alignSelf:"center",marginBottom:10,position:"absolute",top:"35%",zIndex:100,paddingLeft:16,paddingTop:5,paddingBottom:5,borderWidth:1,borderColor:"#615F5F",width:260,backgroundColor:"white"}}>
                
                    <Text style={{fontWeight:"bold",textAlign:"left"}}>
                                        내 위치
                    </Text>    
                    <Text>
                        {this.state.current}
                    </Text>
                </View>
                <View style={{height:40}}>
                    <View style={{justifyContent:"center",position:"absolute"}}>
                        <Search width={18} height={18} style={{marginTop:10,marginLeft:10,zIndex:5}}/>
                    </View>
                    <TextInput value={this.state.search} onChangeText={e => this.setState({search:e})} onSubmitEditing={(e) => this.searchAddress(e)} style={{height:"100%",backgroundColor:"white",width:"100%",paddingLeft:40, fontSize:13}} placeholder="주소로 검색"/>
                </View>
                <MapView 
                initialRegion={{ 
                    latitude: this.state.latitude, 
                    longitude: this.state.longitude, 
                    latitudeDelta: 0.005, 
                    longitudeDelta: 0.001, 
                }}
                
                region={this.state.isSearching?{
                    latitude: this.state.searchLatitude, 
                    longitude: this.state.searchLongitude, 
                    latitudeDelta: 0.005, 
                    longitudeDelta: 0.001, }:undefined}
                minZoom= {20}
                trac
                onRegionChange={(region) => {
                    this.setState({
                        latitude:region.latitude,
                        longitude:region.longitude
                    })
                }}
                onRegionChangeComplete={(region) => {
                    
                    this.getCurrentPosition()
                }}
                showsUserLocation={true}
                 style={{width:"100%",height:"100%"}} >
                 <Marker style={{display:"none"}} coordinate={{
                    latitude: this.state.latitude, 
                    longitude: this.state.longitude}} 
                    title="내 위치"
                    description={this.state.current}>
                    
                        <Fake_Marker/>
                        <MapView.Callout
                        
                        style={{alignItems:"center",width:260}}>
                            <View style={{width:"100%"}}>
                                <Text style={{fontWeight:"bold"}}>
                                    이 위치에서 검색
                                </Text>    
                                <Text>
                                    {`${this.state.current}`}
                                </Text>    
                            </View>    
                        </MapView.Callout>
                        
                    </Marker>

                 </MapView>
                 </View>:<MapView></MapView>}
                 
            <TouchableOpacity onPress={() => {
                this.setState({isModalVisible:true})
            }} style={{width:"100%",height:"8%",position:"absolute",justifyContent:"center",bottom:0,backgroundColor:"#f4cd37",alignItems:"center"}}>
                <Text style={{fontSize:17,color:"white",paddingLeft:10,}}>즐겨찾기 추가</Text>
            </TouchableOpacity>

            
      <Modal onBackButtonPress={() => this.setState({isModalVisible:false})} onBackdropPress={() => this.setState({isModalVisible:false})} isVisible={this.state.isModalVisible}>
        <View style={{ width:"100%",backgroundColor:"white",alignSelf:"center",paddingTop:16,paddingLeft:16,paddingRight:16}}>
            <Text style={{fontSize:17,fontWeight:"bold",marginBottom:16}}>
                즐겨찾기 추가&편집
            </Text>
            <View style={{flexDirection:"row",marginBottom:18}}>
                <Text style={{fontSize:15,color:"#615F5F"}}>
                    {this.state.current}
                </Text>
            </View>
            <TextInput value={this.state.detail} onChangeText={e => this.setState({detail:e})} placeholder="ex) 집" style={{width:"100%",paddingLeft:16,marginBottom:16,alignSelf:"center",borderColor:"#FFD63A",borderWidth:1}}>
            </TextInput>
        </View>
        <View style={{flexDirection:"row"}}>
            <TouchableOpacity onPress={() => this.savePosition()} style={{width:"50%",paddingTop:12,paddingBottom:15,backgroundColor:"#FFD63A"}}>
                <Text style={{fontWeight:"bold",fontSize:14,textAlign:"center"}}>
                    추가
                </Text>
                
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.setState({isModalVisible:false})} style={{width:"50%",paddingTop:12,paddingBottom:15,backgroundColor:"white"}}>
                <Text style={{fontWeight:"bold",fontSize:14,textAlign:"center"}}>
                    취소
                </Text>
                
            </TouchableOpacity>
            </View>
      </Modal>
            </View>
        )

    }

}

const style=StyleSheet.create({
    list_pick_event: {
        paddingTop:17,
        paddingBottom:17,
        borderBottomColor:"#BBB9B9",
        borderTopColor:"#BBB9B9",
        borderBottomWidth:0.5,
    },
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    avatar : {
        width:32,
        height:32,
        borderRadius:100,
    },
    detail: {
        marginLeft:15,
        flex:1,
        flexDirection:"row",
    },
    hit: {
        fontSize:9,
        fontWeight:"bold"
    },
    date: {
        marginLeft:9,
        fontSize:9,
        color:"black"
    },
    userWrapper : {
        flex:1,
        flexDirection:"row",
        paddingTop:13,
        paddingBottom:17,
        borderBottomColor:"#AEAEAE",
        borderBottomWidth:1,
    },
    nickname : {
        marginLeft:10,
        fontSize:13,
        fontWeight:"bold",
        color:"black"
    },
    title : {
        fontSize:13,
        fontWeight:"bold",
        color:"black"
    },
    like : {
        marginTop:3,
        fontSize:10,
        color:"red",
        marginLeft:5,
    },
    titleWrapper : {
        marginTop:17,
        paddingLeft:19,
        flex:1,
        flexDirection:"row"
    }
})
export default MainPage