import React, {Component} from 'react';
import MapView, {Marker, MarkerAnimated} from 'react-native-maps';
import PropTypes from 'prop-types';
import {StyleSheet, View, Image, Text, Alert} 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';
import {IlinkEmitter} from "./../../utils/events";

const API_KEY = 'AIzaSyCQY0rwMM9Pn9XWt5F6YLhGoez_bU1IGtc';
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';
//import {IlinkEmitter} from './../../utils/events';
import DeviceInfo from 'react-native-device-info';

class IMap extends Component {
  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,
    onLayout: PropTypes.func,
  };

  static defaultProps = {
    isNeedUserFocus: false,
  };

  constructor(props) {
    super(props);
    this.state = {
      markers: [],
      roadReady: false,
      isNeedUserFocus: false,
      positionMarkerText: I18n.t('YOUR_THERE'),
    };
    IlinkEmitter.on('langueChange', this.updateLangue.bind(this));
  }

  getPositionMarkerText() {
    let currentLanguage = I18n.currentLocale();
    let myPositionMarkerText = null;
    switch (currentLanguage) {
      case 'fr':
        myPositionMarkerText = 'Vous êtes ici';
        break;

      case 'en':
        myPositionMarkerText = 'You are here';
        break;

      default:
        myPositionMarkerText = I18n.t('YOUR_THERE');
        break;
    }

    return myPositionMarkerText;
  }

  updateLangue() {
    //Alert.alert("Langue", I18n.currentLocale(), [{ text: "Ok", onPress: () => { } }]);
    this.setState({positionMarkerText: this.getPositionMarkerText()});
  }

  mapRef = ref => {
    this.mapview = ref;
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.positionMarkerText !== this.state.positionMarkerText) {
      this.forceUpdate();
    }
  }

  getMapRef = () => this.mapview;

  componentWillReceiveProps(nextProps, nextContext) {
    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}
            onLayout={this.props.onLayout}
            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) {
      return (
        <IMarker
          isUser={true}
          lang={this.props.lang}
          isNeedFocus={this.state.isNeedUserFocus}
          title={this.state.positionMarkerText}
          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,
  },
});