import React, { useCallback, useEffect, useRef } from 'react';
import { findNodeHandle, UIManager } from 'react-native';
import { PersonaInquiryViewManager } from './PersonaInquiryViewManager';
import {
  callOnCanceledCallback,
  callOnCompleteCallback,
  callOnErrorCallback,
  callOnEventCallback,
  callOnReadyCallback,
} from './util';
import type {
  OnReadyCallback,
  OnCanceledCallback,
  OnCompleteCallback,
  OnErrorCallback,
  OnEventCallback,
} from './callbacks';
import type { InquiryEvent } from './InquiryEvent';

let onReadyCalled = false;
let onReadyCallback = () => {};
export const onPersonaInquiryViewEvent: OnEventCallback = (
  event: InquiryEvent
) => {
  if (event.type == 'start') {
    onReadyCalled = false;
  } else if (event.type == 'page_change' && !onReadyCalled) {
    onReadyCalled = true;

    setTimeout(function () {
      onReadyCallback();
    }, 400);
  }
};

const resetOnReadyState = () => {
  onReadyCalled = false;
  onReadyCallback = () => {};
};

export default function PersonaInquiryView(props: {
  style: any;
  inquiry: any;
  onComplete: OnCompleteCallback;
  onCanceled: OnCanceledCallback;
  onError: OnErrorCallback;
  onEvent?: OnEventCallback;
  onReady: OnReadyCallback;
}) {
  const ref = useRef(null);

  const create = (viewId: number | null) => {
    try {
      if (viewId == null) {
        callOnErrorCallback({ 
          debugMessage: 'PersonaInquiryView not found', 
          errorCode: 'UnexpectedError' 
        }, props.onError);
        return;
      }

      const viewManagerConfig =
        UIManager.getViewManagerConfig('PersonaInquiryView');
      if (!viewManagerConfig || !viewManagerConfig.Commands) {
        callOnErrorCallback({ 
          debugMessage: 'PersonaInquiryView config not found', 
          errorCode: 'UnexpectedError' 
        }, props.onError);
        return;
      }
      UIManager.dispatchViewManagerCommand(
        viewId,
        viewManagerConfig.Commands.create,
        [viewId]
      );
    } catch (error) {
      callOnErrorCallback({ 
        debugMessage: 'Error dispatching create command.', 
        errorCode: 'UnexpectedError' 
      }, props.onError);
    }
  };

  useEffect(() => {
    const viewId = findNodeHandle(ref.current);

    onReadyCallback = () => {
      props.onReady();
    };

    create(viewId);

    return () => {
      resetOnReadyState();
    };
  }, []);

  const _onComplete = useCallback(
    (event: any) => {
      callOnCompleteCallback(event.nativeEvent, props.onComplete);
    },
    [props.onComplete]
  );

  const _onCanceled = useCallback(
    (event: any) => {
      callOnCanceledCallback(event.nativeEvent, props.onCanceled);
    },
    [props.onCanceled]
  );

  const _onError = useCallback(
    (event: any) => {
      callOnErrorCallback(event.nativeEvent, props.onError);
    },
    [props.onError]
  );

  const _onEvent = useCallback(
    (event: any) => {
      callOnEventCallback(event.nativeEvent, props.onEvent);
    },
    [props.onEvent]
  );

  const _onReady = useCallback(() => {
    callOnReadyCallback(props.onReady);
  }, [props.onReady]);

  return (
    <PersonaInquiryViewManager
      style={props.style}
      inquiry={props.inquiry.toOptionsJson()}
      onComplete={_onComplete}
      onCanceled={_onCanceled}
      onError={_onError}
      onEvent={_onEvent}
      onReady={_onReady}
      ref={ref}
    />
  );
}