import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, Image, Animated } from 'react-native';
import { ViewPropTypes } from 'deprecated-react-native-prop-types';

import decorateMapComponent, {
  DecoratedComponent,
  SUPPORTED,
  USES_DEFAULT_IMPLEMENTATION,
} from './decorateMapComponent';
import { MapOverlayProps } from 'react-native-maps';

const viewConfig = {
  uiViewClassName: 'AIR<provider>MapOverlay',
  validAttributes: {
    image: true,
  },
};

const propTypes = {
  ...ViewPropTypes,
  // A custom image to be used as overlay.
  image: PropTypes.any.isRequired,
  // Top left and bottom right coordinates for the overlay
  bounds: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired,
  // The bearing in degrees clockwise from north.
  bearing: PropTypes.number,
  /* Boolean to allow an overlay to be tappable and use the
   * onPress function
   */
  tappable: PropTypes.bool,
  // Callback that is called when the user presses on the overlay
  onPress: PropTypes.func,
  // The opacity of the overlay.
  opacity: PropTypes.number,
};

class MapOverlay extends DecoratedComponent<MapOverlayProps> {
  static propTypes = propTypes;
  static viewConfig = viewConfig;
  static defaultProps = {
    opacity: 1.0,
  };
  static Animated: Animated.AnimatedComponent<typeof MapOverlay>;

  render() {
    let image;
    if (this.props.image) {
      if (
        typeof this.props.image.startsWith === 'function' &&
        this.props.image.startsWith('http')
      ) {
        image = this.props.image;
      } else {
        image = Image.resolveAssetSource(this.props.image) || {};
        image = image.uri;
      }
    }

    const AIRMapOverlay = this.getAirComponent();

    return (
      <AIRMapOverlay
        {...this.props}
        image={image}
        style={[styles.overlay, this.props.style]}
      />
    );
  }
}

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    backgroundColor: 'transparent',
  },
});

MapOverlay.Animated = Animated.createAnimatedComponent(MapOverlay);

export default decorateMapComponent(MapOverlay, {
  componentType: 'Overlay',
  providers: {
    google: {
      ios: SUPPORTED,
      android: USES_DEFAULT_IMPLEMENTATION,
    },
  },
});