import React, { useMemo } from "react";
import { StyleSheet, View } from "react-native";
import WebView, { WebViewMessageEvent } from "react-native-webview";
import {
  WebViewErrorEvent,
  WebViewNavigation,
  WebViewNavigationEvent,
  WebViewProgressEvent,
  WebViewSource,
} from "react-native-webview/lib/WebViewTypes";

export interface PlayerBodyProps {
  onMessage?: (event: WebViewMessageEvent) => void;
  source: WebViewSource;
  onLoadEnd?: (event: WebViewNavigationEvent | WebViewErrorEvent) => void;
  injectedJavaScript?: string;
  scrollEnabled?: boolean;
  webContentsDebuggingEnabled?: boolean;
  onError?: (event: WebViewErrorEvent) => void;
  onNavigationStateChange?: (event: WebViewNavigation) => void;
  onLoadProgress?: (event: WebViewProgressEvent) => void;
}

const PlayerBody: React.ForwardRefRenderFunction<any, PlayerBodyProps> = (
  props,
  ref
) => {
  const {
    onMessage,
    source,
    onLoadEnd,
    injectedJavaScript,
    scrollEnabled,
    webContentsDebuggingEnabled,
    onError,
    onNavigationStateChange,
    onLoadProgress,
  } = props;

  const nativeConfig = useMemo(
    () => ({
      props: { webContentsDebuggingEnabled: webContentsDebuggingEnabled },
    }),
    [webContentsDebuggingEnabled]
  );

  const originWhitelist = useMemo(() => ["*"], []);

  return (
    <View style={styles.container}>
      <WebView
        ref={ref}
        source={source}
        onMessage={onMessage}
        style={styles.webview}
        onLoadEnd={onLoadEnd}
        injectedJavaScript={injectedJavaScript}
        scrollEnabled={scrollEnabled}
        originWhitelist={originWhitelist}
        allowFileAccess={true}
        allowUniversalAccessFromFileURLs={true}
        nativeConfig={nativeConfig}
        thirdPartyCookiesEnabled={true}
        sharedCookiesEnabled={true}
        javaScriptEnabled={true}
        startInLoadingState={false}
        saveFormDataDisabled={true}
        domStorageEnabled={true}
        cacheEnabled={true}
        onLoadProgress={onLoadProgress}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        onNavigationStateChange={onNavigationStateChange}
        onError={onError}
        shouldRasterizeIOS={false}
        allowsBackForwardNavigationGestures={false}
        useSharedProcessPool
        mixedContentMode="compatibility"
      />
    </View>
  );
};

export default React.memo(React.forwardRef(PlayerBody));

const styles = StyleSheet.create({
  container: { flex: 1 },
  webview: { flex: 1 },
});