import * as React from "react";
import { View, findNodeHandle } from "react-native";
import { RNVntelCCCD, RNVntelCCCDMRZView, NativeViewProps } from "./native";

export interface Props {
  style?: NativeViewProps["style"];
  layout: NativeViewProps["layout"];
}

const VntelCCCDMRZView: React.FC<Props> = (props) => {
  const { layout = [], ...otherProps } = props;
  const nativeLayout = layout.map((unit) => {
    return Object.assign({}, unit, {});
  });
  const nativeEl = React.useRef(null);

  React.useEffect(() => {
    (async function register() {
      if (nativeEl.current) {
        await RNVntelCCCD.addMRZView(findNodeHandle(nativeEl.current))
      }
    })();

    return () => {
      (async function unregister() {
        if (nativeEl.current) {
            await RNVntelCCCD.removeMRZView(findNodeHandle(nativeEl.current))
        }
      })();
    };
  }, [nativeEl.current]);
  if (RNVntelCCCDMRZView) {
    return (
      <RNVntelCCCDMRZView
        ref={nativeEl}
        layout={nativeLayout}
        {...otherProps}
      />
    );
  } else {
    return <View {...otherProps} />;
  }
};

export default VntelCCCDMRZView;
