import Qs from 'qs';
import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator } from 'react-native';

export default class extends Component {
  static defaultProps = {
    scrollEnabled: true,
  };

  state = { html: null };

  constructor(props) {
    super(props);
    this.handleSource(props.source, props.newWindow);
  }

  handleSource = (source, newWindow) => {
    if (!source.method) return;

    if (newWindow) {
      this.handleSourceInNewWindow(source, newWindow);
    } else {
      this.handleSourceInIFrame(source);
    }
  };

  handleSourceInIFrame = source => {
    const { uri, ...options } = source;
    const baseUrl = uri.substr(0, uri.lastIndexOf('/') + 1);
    fetch(uri, options)
      .then(response => response.text())
      .then(html => this.setState({ html: `<base href="${baseUrl}" />` + html }));
  };

  handleSourceInNewWindow = (source, newWindow) => {
    if (source.method === 'POST') {
      const contentType = source.headers['Content-Type'];
      let body = '';
      if (contentType && contentType.includes('application/x-www-form-urlencoded')) {
        body = Qs.parse(source.body);
      } else {
        console.warn(
          '[WebView] When opening a new window, this content-type is not supported yet, please make a PR!',
          contentType
        );
        return;
      }

      window.open(
        require('./postMock.html') +
          '?' +
          Qs.stringify({
            uri: source.uri,
            body: JSON.stringify(body),
          }),
        newWindow.name || 'webview',
        newWindow.features || undefined
      );
    } else {
      console.warn(
        '[WebView] When opening a new window, this method is not supported yet, please make a PR!',
        source.method
      );
    }
  };

  componentDidMount() {
    if (this.props.onMessage) {
      window.addEventListener('message', this.onMessage, true);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (
      this.props.source.uri !== nextProps.source.uri ||
      this.props.source.method !== nextProps.source.method ||
      this.props.source.body !== nextProps.source.body
    ) {
      this.handleSource(nextProps.source, nextProps.newWindow);
    }
  }

  componentWillUnmount() {
    if (this.props.onMessage) {
      window.removeEventListener('message', this.onMessage, true);
    }
  }

  onMessage = nativeEvent => nativeEvent.isTrusted && this.props.onMessage({ nativeEvent });

  render() {
    if (this.props.newWindow) {
      return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator />
        </View>
      );
    }

    const { title, source, onLoad, scrollEnabled } = this.props;
    return (
      <iframe
        title={title}
        src={!source.method ? source.uri : undefined}
        srcDoc={this.state.html || source.html}
        style={{
          width: '100%',
          height: '100%',
          border: 0,
          overflow: !scrollEnabled ? 'hidden' : undefined,
        }}
        allowFullScreen
        allowpaymentrequest="true"
        frameBorder="0"
        seamless
        onLoad={onLoad}
      />
    );
  }
}

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  iframe: {
    width: '100%',
    height: '100%',
    border: 0,
  },
  noScroll: {
    overflow: 'hidden',
  },
});

@@ -100,16 +100,31 @@
 ndicator
+, createElement
  %7D from 
@@ -2730,26 +2730,34 @@
 urn 
-(%0A      %3C
+createElement('
 iframe
-%0A  
+', %7B%0A
     
@@ -2767,19 +2767,10 @@
 itle
-=%7Btitle%7D%0A  
+,%0A
     
@@ -2774,18 +2774,18 @@
      src
-=%7B
+: 
 !source.
@@ -2815,20 +2815,18 @@
 ndefined
-%7D%0A  
+,%0A
       sr
@@ -2829,18 +2829,18 @@
   srcDoc
-=%7B
+: 
 this.sta
@@ -2861,20 +2861,18 @@
 rce.html
-%7D%0A  
+,%0A
       st
@@ -2878,156 +2878,61 @@
 tyle
-=%7B%7B%0A          width: '100%25',%0A          height: '100%25',%0A          border: 0,%0A          overflow: !scrollEnabled ? 'hidden' : undefined,%0A        %7D%7D%0A  
+: %5Bstyles.iframe, scrollEnabled && styles.noScroll%5D,%0A
     
@@ -2948,19 +2948,24 @@
 llScreen
-%0A  
+: true,%0A
       al
@@ -2985,18 +2985,18 @@
 uest
-=%22
+: '
 true
-%22%0A  
+',%0A
     
@@ -3012,15 +3012,15 @@
 rder
-=%220%22%0A  
+: '0',%0A
     
@@ -3029,19 +3029,24 @@
 seamless
-%0A  
+: true,%0A
       on
@@ -3053,31 +3053,15 @@
 Load
-=%7BonLoad%7D%0A      /%3E
+,
 %0A    
+%7D
 );%0A 

Use createElement