import { useEffect, useState } from "react";
import { EVENT_NAMES, EVENT_PROPERTY_KEYS } from "../constants";
import { AnalyticsEvent } from "../interface";
import { ScreenState } from "../screen/BaseScreen";
import { useAnalyticsEvent } from "./useAnalyticsEvent";

const useScreenLoadTime = (
  screenName: string | null,
  moduleName: string | null,
  screenState: ScreenState | null | undefined,
) => {
  const [startTime, setStartTime] = useState<number | null>(null);
  const { sendAsAnalyticsEvent } = useAnalyticsEvent();

  useEffect(() => {
    if (screenState === ScreenState.LOADING && startTime === null) {
      setStartTime(performance.now());
    } else if (
      (screenState === ScreenState.LOADED ||
        screenState === ScreenState.ERROR) &&
      startTime !== null
    ) {
      const endTime = performance.now();
      const loadTime = Math.round(endTime - startTime);
      if (screenName && moduleName) {
        const analyticsEvent: AnalyticsEvent = {
          name: moduleName + "_" + EVENT_NAMES.SCREEN_LOAD_TIME,
          properties: {
            [EVENT_PROPERTY_KEYS.SCREEN_NAME]: screenName,
            [EVENT_PROPERTY_KEYS.LOAD_TIME]: loadTime.toString(),
            [EVENT_PROPERTY_KEYS.SCREEN_STATE]: ScreenState[screenState],
          },
        };

        sendAsAnalyticsEvent(analyticsEvent);
      }
      setStartTime(null);
    }
  }, [screenState]);
};

export default useScreenLoadTime;