import * as React from "react";

import { ViewportTracker as ViewportTrackerComponent } from "./ViewportTracker";
import { ViewportEventContext, ViewportEvents } from "../ViewportEvents";

type Props = {
  viewportEventsManager?: any;
  children: React.ReactNode;
  flatListRef?: any; // this ref is used to bind to children component
};

export function ViewportTracker(props: Props) {
  const viewportEventsManager = React.useRef(null);

  React.useLayoutEffect(() => {
    viewportEventsManager.current = new ViewportEvents(true);
  }, []);

  const eventsManager =
    process.env.NODE_ENV === "test"
      ? props?.viewportEventsManager
      : viewportEventsManager.current;

  return (
    <ViewportEventContext.Provider value={eventsManager}>
      <ViewportTrackerComponent {...props} />
    </ViewportEventContext.Provider>
  );
}