'use strict';

import React, {useState, useEffect, forwardRef} from 'react';

import {StyleSheet, Platform, ViewPropTypes} from 'react-native';

import PropTypes from 'prop-types';

import {WebView} from 'react-native-webview';

import {reduceData, getWidth, isSizeChanged, shouldUpdate} from './utils';

const AutoHeightWebView = React.memo(
  forwardRef((props, ref) => {
    const {
      style,
      onMessage,
      onSizeUpdated,
      scrollEnabledWithZoomedin,
      scrollEnabled,
    } = props;

    const [size, setSize] = useState({
      height: style && style.height ? style.height : 0,
      width: getWidth(style),
    });
    const [scrollable, setScrollable] = useState(false);
    const handleMessage = (event) => {
      onMessage && onMessage(event);
      if (!event.nativeEvent) {
        return;
      }
      let data = {};
      // Sometimes the message is invalid JSON, so we ignore that case
      try {
        data = JSON.parse(event.nativeEvent.data);
      } catch (error) {
        console.error(error);
        return;
      }
      const {height, width, zoomedin} = data;
      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(!!zoomedin);
      const {height: previousHeight, width: previousWidth} = size;
      isSizeChanged({height, previousHeight, width, previousWidth}) &&
        setSize({
          height,
          width,
        });
    };

    const currentScrollEnabled =
      scrollEnabled === false && scrollEnabledWithZoomedin
        ? scrollable
        : scrollEnabled;

    const {currentSource, script} = reduceData(props);

    const {width, height} = size;
    useEffect(
      () =>
        onSizeUpdated &&
        onSizeUpdated({
          height,
          width,
        }),
      [width, height, onSizeUpdated],
    );

    return React.createElement(WebView, {
      ...props,
      ref,
      onMessage: handleMessage,
      style: [
        styles.webView,
        {
          width,
          height,
        },
        style,
      ],
      injectedJavaScript: script,
      source: currentSource,
      scrollEnabled: currentScrollEnabled
    });
  }),
  (prevProps, nextProps) => !shouldUpdate({prevProps, nextProps}),
);

AutoHeightWebView.propTypes = {
  onSizeUpdated: PropTypes.func,
  files: PropTypes.arrayOf(
    PropTypes.shape({
      href: PropTypes.string,
      type: PropTypes.string,
      rel: PropTypes.string,
    }),
  ),
  style: ViewPropTypes.style,
  customScript: PropTypes.string,
  customStyle: PropTypes.string,
  viewportContent: PropTypes.string,
  scrollEnabledWithZoomedin: PropTypes.bool,
  // webview props
  originWhitelist: PropTypes.arrayOf(PropTypes.string),
  onMessage: PropTypes.func,
  scalesPageToFit: PropTypes.bool,
  source: PropTypes.object,
};

let defaultProps = {
  showsVerticalScrollIndicator: false,
  showsHorizontalScrollIndicator: false,
  originWhitelist: ['*'],
};

Platform.OS === 'android' &&
  Object.assign(defaultProps, {
    scalesPageToFit: false,
  });

Platform.OS === 'ios' &&
  Object.assign(defaultProps, {
    viewportContent: 'width=device-width',
  });

AutoHeightWebView.defaultProps = defaultProps;

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

export default AutoHeightWebView;

@@ -1,19 +1,4 @@
-'use strict';%0A%0A
 impo
@@ -215,16 +215,28 @@
 import %7B
+%0A  topic,%0A  
 reduceDa
@@ -238,16 +238,18 @@
 uceData,
+%0A 
  getWidt
@@ -250,16 +250,18 @@
 etWidth,
+%0A 
  isSizeC
@@ -267,16 +267,18 @@
 Changed,
+%0A 
  shouldU
@@ -282,16 +282,18 @@
 ldUpdate
+,%0A
 %7D from '
@@ -634,24 +634,25 @@
 e),%0A    %7D);%0A
+%0A
     const %5Bs
@@ -739,45 +739,8 @@
 %3E %7B%0A
-      onMessage && onMessage(event);%0A
     
@@ -745,17 +745,16 @@
     if (
-!
 event.na
@@ -778,233 +778,158 @@
     
-return;%0A      %7D%0A      let data = %7B%7D;%0A      // Sometimes the message is invalid JSON, so we ignore that case%0A      try %7B%0A        data = JSON.parse(event.nativeEvent.data);%0A      %7D catch (error) %7B%0A        console.error(error);%0A
+try %7B%0A          const data = JSON.parse(event.nativeEvent.data);%0A          if (data.topic !== topic) %7B%0A            onMessage && onMessage(event);%0A    
     
@@ -950,16 +950,24 @@
     
-%7D%0A
+    %7D%0A   
       
+ 
 cons
@@ -1002,16 +1002,51 @@
 = data;%0A
+          console.log(height);%0A    
       !s
@@ -1060,16 +1060,28 @@
 abled &&
+%0A           
  scrollE
@@ -1101,16 +1101,28 @@
 medin &&
+%0A           
  setScro
@@ -1143,24 +1143,28 @@
 din);%0A      
+   
+ 
 const %7Bheigh
@@ -1208,24 +1208,28 @@
 th%7D = size;%0A
+    
       isSize
@@ -1291,24 +1291,28 @@
  &&%0A        
+  
+  
 setSize(%7B%0A  
@@ -1311,32 +1311,36 @@
 ize(%7B%0A          
+    
 height,%0A        
@@ -1333,39 +1333,47 @@
 ight,%0A          
+ 
+   
 width,%0A
+    
         %7D);%0A    
@@ -1368,16 +1368,155 @@
     %7D);%0A
+        %7D catch (error) %7B%0A          onMessage && onMessage(event);%0A        %7D%0A      %7D else %7B%0A        onMessage && onMessage(event);%0A      %7D%0A
     %7D;%0A%0A
@@ -2237,16 +2237,17 @@
 lEnabled
+,
 %0A    %7D);

Refactor handleMessage to solve: https://github.com/iou90/react-native-autoheight-webview/issues/207