import React,{PureComponent} from 'react';
import MapView,{Marker,MarkerAnimated} from "react-native-maps"
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Image,
    Text,
} from 'react-native';
const theme=require("../../utils/theme");
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import IMarker from "./IMarker";
import I18n from "react-native-i18n";
import MapViewDirections from 'react-native-maps-directions';
const API_KEY="AIzaSyAYOEp-Pckvc3TwOIulCICokKgmp14rGHI";
const mnetwork=require('./../../datas/img/png/home_network.png');
const othernetwork=require('./../../datas/img/png/other_net.png');
import { copilot, CopilotStep } from 'react-native-copilot';

class IMap extends PureComponent {
    static propTypes = {
        markers: PropTypes.array,
        map:PropTypes.object,
        network:PropTypes.object,
        myNetwork:PropTypes.object,
        selectedMarker:PropTypes.object,
        myPosition:PropTypes.object,
        onMarkerClick:PropTypes.func,
        initialRegion:PropTypes.object,
        typeMap:PropTypes.string,
        needRoad:PropTypes.bool,
        isNeedUserFocus:PropTypes.bool,
        onNeedRoadReady:PropTypes.func,
        onNeedRoadError:PropTypes.func,
        onMapReady:PropTypes.func
    };

    static defaultProps = {
        isNeedUserFocus:false
    };
    constructor(props){
        super(props)
        this.state={
            markers:[],
            roadReady:false,
            isNeedUserFocus:false,
        }
    }
    mapRef = (ref) => {
        this.mapview = ref
    }

    getMapRef = () => this.mapview
componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
        const markers=this.state.markers
        const newmarkers=nextProps.markers
    if(markers.length<=0)
        this.setState({markers:newmarkers})
    else if(markers.length!==newmarkers){
        this.setState({markers:newmarkers})
    }
    this.setState({isNeedUserFocus:nextProps.isNeedUserFocus})
}

    render(){
        const {markers,initialRegion,myPosition,myNetwork,typeMap,selectedMarker}=this.props
    if(initialRegion!==null && myNetwork!==null)
        return (
            <View style={styles.container}>
            <MapView
                style={{flex: 1}}
                initialRegion={initialRegion}
                mapType={typeMap}
                ref={(re) => this.mapview = re}
                onMapReady={this.props.onMapReady}
                onRegionChangeComplete={(re)=>{this.onRegionChangeOver(re)}}>
                {this.state.markers.map((item,index)=>{
                    return (
                        <IMarker
                        isUser={false}
                        title={item.lastname}
                        isSelected={(selectedMarker && selectedMarker.id===item.id)}
                        data={item}
                        onPress={(e,marker)=>this.props.onMarkerClick(e,marker)}
                        network={myNetwork}
                    />)
                })}
                {this.renderMyPosition()}
                {this.makeDirection()}

            </MapView>
        </View>)
        else return(<View/>)
    }
    focusToUser(){
        this.setState({isNeedUserFocus:true})
    }
    closeUserFocus(){
        this.setState({isNeedUserFocus:false})
    }
    onRegionChangeOver(region){

    }
    makeDirection() {
        let {myPosition, selectedMarker,needRoad} = this.props
        if (myPosition !== null && selectedMarker !== null && selectedMarker !== undefined && myPosition !== undefined && needRoad) {
                setTimeout(()=>{
                    if(!this.state.roadReady){
                        this.setState({roadReady:true})
                        this.props.onNeedRoadError()}
                },10000)
            
            return (<MapViewDirections
                origin={myPosition}
                destination={selectedMarker}
                apikey={API_KEY}
                strokeWidth={3}
                onReady={(data)=>{
                    this.setState({roadReady:true})
                    this.props.onNeedRoadReady(data)}
                }
                onError={()=>{
                    this.setState({roadReady:true})
                    this.props.onNeedRoadError()}
                }
                strokeColor={theme.primary}
            />)
        }
    }

    renderMyPosition() {
        const {myPosition,myNetwork}=this.props
        if(myPosition!=null){
            if(false){
                return (
                <CopilotStep>
                <IMarker
               
                    isUser={true}
                    lang={this.props.lang}
                    isNeedFocus={this.state.isNeedUserFocus}
                    title={I18n.t("YOUR_THERE")}
                    data={{
                        longitude:myPosition.longitude,
                        latitude:myPosition.latitude}}
                />
                </CopilotStep>
                )
            }else
            return (<IMarker
                isUser={true}
                lang={this.props.lang}
                isNeedFocus={this.state.isNeedUserFocus}
                title={I18n.t("YOUR_THERE")}
                data={{
                    longitude:myPosition.longitude,
                    latitude:myPosition.latitude}}
            />)
    }
        }
    }
         

export default IMap;
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
    },
    myClusterTextStyle:{
        color:"white"
    },
    myClusterStyle: {
        backgroundColor:theme.accent,
        height:32,
        justifyContent:'center',
        alignItems:'center',
        width:32,
        borderRadius:16
    },
    rowContainer: {
        height: 52,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    iconContainer: {
        marginRight: 16,
    },
    mapmarker:{
        width:52,
        height:52,
    },
    slidingup:{
        backgroundColor:"transparent",
        position:"absolute",
        height:300,
        bottom:0,
        right:35,
        zIndex: 1
    },
    panel: {
        flex: 1,
        backgroundColor: 'white',
        position: 'relative'
    },
    panelHeader: {
        height: 120,
        backgroundColor: '#b197fc',
        alignItems: 'center',
        justifyContent: 'center'
    },
    favoriteIcon: {
        left: responsiveWidth(75),
        backgroundColor: theme.primary,
        width: 64,
        justifyContent:'center',
        alignContent: 'center',
        bottom:-64,
        position:'absolute',
        height: 64,
        padding: 8,
        zIndex:1,
        borderRadius: 32,
    },
    hambuger:{
    },
    topBar:{
        position:'absolute',
        alignSelf: 'center',
        justifyContent:'center',
        alignItems: 'center',
        marginTop:responsiveHeight(4),
        width:responsiveWidth(95),

    },
    searchInput:{
        width:responsiveWidth(70),
        fontSize:14
    },
    search: {
        width:responsiveWidth(70),
        height:responsiveHeight(10),
        backgroundColor:'#00000000',


    },

    map:{
        width:responsiveWidth(100),
        height:responsiveHeight(100),
    },
    backgroundd_drawer:{
        backgroundColor:'#000',
    },
    cardsearch:{
        width:responsiveWidth(90),
        height:responsiveHeight(10),
        position:'absolute',
        alignSelf: 'center',
        marginTop: 5,

    },
    actionButtonIcon: {
        fontSize: 20,
        height: 22,

        color: 'white',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});