'use strict';

var React = require('react-native');
var requireNativeComponent = require('requireNativeComponent');
var { NativeModules, Text } = React;
var AnimationUtils = require('AnimationUtils');

var MapView = React.createClass({
  componentDidMount() {
    var nodeHandle = React.findNodeHandle(this);
    NativeModules.MapboxGLManager.resetNorth(nodeHandle);
    NativeModules.MapboxGLManager.setCenterCoordinateAnimated(nodeHandle, 0,0,0);
  },
  _onChange(event: Event) {
    if (!this.props.onRegionChange) {
      return;
    }
    this.props.onRegionChange(event.nativeEvent.region);
  },
  _onOpenAnnotation(event: Event) {
    if (!this.props.onOpenAnnotation) {
      return;
    }
    this.props.onOpenAnnotation(event.nativeEvent.annotation);
  },
  _onUpdateUserLocation(event: Event) {
    if (!this.props.onUpdateUserLocation) {
      return;
    }
    this.props.onUpdateUserLocation(event.nativeEvent.userLocation);
  },
  propTypes: {
    showsUserLocation: React.PropTypes.bool,
    rotateEnabled: React.PropTypes.bool,
    accessToken: React.PropTypes.string.isRequired,
    zoomLevel: React.PropTypes.number,
    direction: React.PropTypes.number,
    styleURL: React.PropTypes.string,
    clipsToBounds: React.PropTypes.bool,
    debugActive: React.PropTypes.bool,
    centerCoordinate: React.PropTypes.shape({
      latitude: React.PropTypes.number.isRequired,
      longitude: React.PropTypes.number.isRequired
    }),
    annotations: React.PropTypes.arrayOf(React.PropTypes.shape({
      latitude: React.PropTypes.number.isRequired,
      longitude: React.PropTypes.number.isRequired,
      title: React.PropTypes.string,
      subtitle: React.PropTypes.string,
    })),
    onRegionChange: React.PropTypes.func,
    onOpenAnnotation: React.PropTypes.func,
    onUpdateUserLocation: React.PropTypes.func
  },

  render: function() {

    var props = this.props;

    if (!this.props.styleURL) {
      props.styleURL = 'asset://styles/mapbox-streets-v7.json';
    }

    return <MapboxGLView
      {...props}
      onChange={this._onChange}
      onBlur={this._onOpenAnnotation}
      onLoadingFinish={this._onUpdateUserLocation} />;
  }
});

var MapboxGLView = requireNativeComponent('RCTMapboxGL', MapView);

module.exports = MapView;

@@ -150,303 +150,432 @@
 ct;%0A
+%0A
 var 
-AnimationUtils = require('AnimationUtils');%0A%0Avar MapView = React.createClass(%7B%0A  componentDidMount() %7B%0A    var nodeHandle = React.findNodeHandle(this);%0A    NativeModules.MapboxGLManager.resetNorth(nodeHandle);%0A    NativeModules.MapboxGLManager.setCenterCoordinateAnimated(nodeHandle, 0,0,0);
+INNERVIEW = 'InnerScrollView';%0A%0Avar MapMixins = %7B%0A  resetNorth(mapRef) %7B%0A    NativeModules.MapboxGLManager.resetNorth(React.findNodeHandle(this.refs%5BmapRef%5D));%0A  %7D,%0A  setCenterCoordinateAnimated(mapRef, latitude, longitude, zoom) %7B%0A    NativeModules.MapboxGLManager.setCenterCoordinateAnimated(React.findNodeHandle(this.refs%5BmapRef%5D), 0,0,0);%0A  %7D,%0A%7D;%0A%0Avar MapView = React.createClass(%7B%0A  statics: %7B%0A    Mixin: MapMixins
 %0A  %7D

add mixins