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 { SERVER } from '../../common/servername';
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:"",
            store_posts:[],
            fires:[]
        }
    }
    componentDidMount() {
        
        AsyncStorage.getItem("user",(err,user) => {
            if(user) {
            this.setState({
                user:JSON.parse(user)
            })
            //get(`http://${SERVER}/stores/managerRead/${JSON.parse(user).id}`).then(res => {
            //    this.setState({
             //       myStore:res.data.data
            //    })
            //})
            get(`http://${SERVER}/fire`).then(res => {
                this.setState({
                    fires:res.data.data
                })
            }).catch(e => console.log(e))
            AsyncStorage.getItem("current",(err,current) => {
                AsyncStorage.getItem("distance",(err,distance) => {
                    AsyncStorage.getItem("filter_server",(err,filter) => {
                        post(`http://${SERVER}/stores/readAll/${JSON.parse(user).id}`,
                        {
                            latitude:JSON.parse(current).lat,
                            longitude:JSON.parse(current).lng,
                            radius:JSON.parse(distance).distance,
                            sorting:filter
                        }).then(res => {
                            console.log(res.data.data)
                            this.setState({
                                store_posts:res.data.data
                            },() => {
                            })
                        })
                    })
                })
            })
            }
            else {
                
            AsyncStorage.getItem("current",(err,current) => {
                AsyncStorage.getItem("distance",(err,distance) => {
                    AsyncStorage.getItem("filter_server",(err,filter) => {
                        post(`http://${SERVER}/stores/readAll/${0}`,
                        {
                            latitude:JSON.parse(current).lat,
                            longitude:JSON.parse(current).lng,
                            radius:JSON.parse(distance).distance,
                            sorting:filter
                        }).then(res => {
                            this.setState({
                                store_posts:res.data.data,
                                isLoading:false
                            },() => {
                            })
                        })
                    })
                })
            })
            }
        })
        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("LatestAddress",(err,res) => {
            if(!res) {
                AsyncStorage.setItem("LatestAddress",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(),"detail":this.state.detail}]))
            }
            else {
                const temp = JSON.parse(res)
                AsyncStorage.setItem("LatestAddress",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(),detail:this.state.detail}])))
            }
        })
        AsyncStorage.setItem("current",JSON.stringify({lat:this.state.latitude,lng:this.state.longitude,name:this.state.current}))
        this.props.navigation.navigate('Main_')
    }
    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?
                <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>
                <MapView 
                initialRegion={{ 
                    latitude: this.state.location.coords.latitude, 
                    longitude: this.state.location.coords.longitude, 
                    latitudeDelta: 0.005, 
                    longitudeDelta: 0.001, 
                }}
                minZoom= {20}
                trac
                onRegionChange={(region) => {
                    this.setState({
                        latitude:region.latitude,
                        longitude:region.longitude
                    })
                }}
                onRegionChangeComplete={() => {
                    this.getCurrentPosition()
                }}
                showsUserLocation={true}
                 style={{width:"100%",height:"100%"}} >
                {this.state.store_posts.map((e,i) => {
                    return (
                        
                 <Marker style={{display:"none"}} coordinate={{
                    latitude: parseFloat(e.latitude), 
                    longitude: parseFloat(e.longitude)}} 
                    title="내 위치">
                    
                        <Fake_Marker/>
                        <MapView.Callout
                        
                        style={{alignItems:"center",width:260}}>
                            <View style={{width:"100%"}}>
                                <Text style={{fontWeight:"bold"}}>
                                    {e.name}
                                </Text>    
                                <Text>
                                    {`최근 의심자 발생수 : ${e.fire_count}`}
                                </Text>    
                            </View>    
                        </MapView.Callout>
                        
                    </Marker>
                    )
                })}
                {this.state.fires.map((e,i) => {
                     return (
                         <MapView.Circle
                         center={{
                             latitude:parseFloat( e.latitude),
                             longitude:parseFloat( e.longitude),
                         }}
                         radius={40}
                         fillColor={"rgba(204,117,63,0.5)"}
                         >
                                 <Text style={{textAlign:"center",color:"white",fontSize:9,fontWeight:"bold"}}>
                                    주의!
                                </Text>
                         </MapView.Circle>
                     )
                 })}
                 <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}}>
            <View style={{flexDirection:"row",marginBottom:18}}>
                <Text style={{color:"#BDBCBC",fontSize:11,width:"18%",alignSelf:"center"}}>
                    도로명 주소
                </Text>
                <Text style={{fontSize:15,color:"#615F5F",marginLeft:8}}>
                    {this.state.road_address}
                </Text>
            </View>
            <View style={{flexDirection:"row",marginBottom:18}}>
                <Text style={{color:"#BDBCBC",fontSize:11,width:"18%",alignSelf:"center"}}>
                    지번 주소
                </Text>
                <Text style={{fontSize:15,color:"#615F5F",marginLeft:8}}>
                    {this.state.address}
                </Text>
            </View>
            <TextInput value={this.state.detail} onChangeText={e => this.setState({detail:e})} placeholder="상세주소 입력" style={{width:"100%",paddingLeft:16,marginBottom:16,alignSelf:"center",borderColor:"#FFD63A",borderWidth:1}}>
            </TextInput>
        </View>
            <TouchableOpacity onPress={() => this.savePosition()} style={{width:"100%",paddingTop:12,paddingBottom:15,backgroundColor:"#FFD63A"}}>
                <Text style={{fontWeight:"bold",fontSize:14,textAlign:"center"}}>
                    확인
                </Text>
                
            </TouchableOpacity>
      </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