import React, { useEffect, useRef } from "react";
import { StyleSheet, View } from "react-native";
import WebView from "react-native-webview";
import EventBus, { EventBusType } from "../../applications/EventBus";
import FunctionApplication from "../../applications/FunctionApplication";
import PlayerBody from "../../components/PlayerBody";
import { prefix } from "../../sdk-app";
import useAppPlayWithoutState from "./useAppPlayWithoutState";
interface MiniappSdkProps {
  newFuncion?: string[];
  onListenEvent: (
    event: string,
    data: string,
    callback: (data: any) => void,
    err: (err: any) => void
  ) => void;
  uri: string;
}

export interface DataEvent {
  object?: object;
  string?: string;
  number?: number;
  boolean?: boolean;
}

export interface Resolve {
  type: string;
  payload: DataEvent;
}

const AppPlayerWithoutState: React.FunctionComponent<MiniappSdkProps> = (
  props
) => {
  const { onListenEvent, uri } = props;
  const refWebview = useRef<WebView>(null);

  const {
    handleMessage,
    onLoadEnd,
    handleNativeKeyboard,
    handleHardwareBackPress,
    handleResolveEvent,
    handleRejectEvent,
  } = useAppPlayWithoutState(refWebview, onListenEvent);

  useEffect(() => {
    eventListener();
    return function () {
      EventBus.getInstance().unsubcribe();
    };
  }, []);

  useEffect(() => {
    let removeKeyboardListener: any;
    if (!removeKeyboardListener) {
      removeKeyboardListener = handleNativeKeyboard();
    }
    return function () {
      if (removeKeyboardListener) {
        removeKeyboardListener();
        removeKeyboardListener = undefined;
      }
    };
  }, []);

  useEffect(() => {
    let removeHardwarebackpress: any;
    if (!removeHardwarebackpress) {
      removeHardwarebackpress = handleHardwareBackPress();
    }
    return function () {
      if (!removeHardwarebackpress) {
        removeHardwarebackpress();
        removeHardwarebackpress = undefined;
      }
    };
  }, []);

  const eventListener = () => {
    EventBus.getInstance().add(
      EventBus.getInstance().events.subscribe(
        async (eventType: EventBusType) => {
          Object.keys(FunctionApplication.funct).map((item) => {
            const { type, data } = eventType.payload;
            if (type === "reject") {
              handleRejectEvent(eventType.type, data);
              return;
            } else {
              if (eventType.type === `${prefix}${item}` && data) {
                let newData = {};
                if (typeof data === "string") {
                  newData = { string: data };
                }
                if (typeof data === "boolean") {
                  newData = { boolean: data };
                }
                if (typeof data === "object") {
                  newData = { object: data };
                }
                if (typeof data === "number") {
                  newData = { number: data };
                }
                handleResolveEvent(eventType.type, newData);
              }
            }
          });
        }
      )
    );
  };

  return (
    <View style={styles.container}>
      <PlayerBody
        ref={refWebview}
        source={{ uri }}
        onMessage={handleMessage}
        onLoadEnd={onLoadEnd}
      />
    </View>
  );
};

export default AppPlayerWithoutState;

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