import {
  wixPatternsFullPageLoadCompletedSrc144Evid1001,
  wixPatternsPageInteractiveSrc144Evid1000,
} from '@wix/bex-core/bi';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useEffect, useState } from 'react';
import { useWixPatternsRouter } from '../../providers/WixPatternsRouterProvider';

interface ReportingParams {
  startTime: number;
  withinRouter: boolean;
}
export const useCollectionPageLoadReporting = ({
  startTime,
  withinRouter,
}: ReportingParams) => {
  const [reportedInteractive, setReportedInteractive] = useState(false);
  const [reportedFullyLoaded, setReportedFullyLoaded] = useState(false);

  const {
    createBILogger,
    initTask: { status },
  } = useWixPatternsContainer();
  const router = useWixPatternsRouter();
  const reportBI = createBILogger({
    pageType: 'Collection',
  });

  const getBIParams = () => {
    const loadingTime = Math.round(performance.now() - startTime);
    return {
      componentType: 'Collection',
      loadingTime,
      withinRouter,
      routerUsage: withinRouter,
    };
  };

  const reportPageInteractive = () => {
    if (!router?.currentState) {
      return;
    }
    reportBI(wixPatternsPageInteractiveSrc144Evid1000(getBIParams()));
    setReportedInteractive(true);
  };

  const reportPageFullyLoaded = () => {
    if (!router?.currentState) {
      return;
    }
    reportBI(wixPatternsFullPageLoadCompletedSrc144Evid1001(getBIParams()));
    setReportedFullyLoaded(true);
  };

  useEffect(() => {
    if (status.isLoading && !reportedInteractive) {
      reportPageInteractive();
      return;
    }

    if (status.isSuccess && !reportedFullyLoaded) {
      if (!reportedInteractive) {
        // it happens when returning from entity page with client side router
        reportPageInteractive();
      }
      reportPageFullyLoaded();
    }
  }, [
    status.isSuccess,
    status.isLoading,
    reportedInteractive,
    reportedFullyLoaded,
  ]);
};