import { useTracking as useCoreTracking } from '@tempi/core-editor';
import { TrackingContext } from '@tempi/editor-site';
import { useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

export const useTracking = () => {
  const location = useLocation();
  const { trackingMapping } = useContext(TrackingContext);
  const [screenName, setScreenName] = useState<string>();

  useEffect(() => {
    setScreenName(trackingMapping?.[location.pathname]?.screenName);
  }, [location.pathname, trackingMapping]);

  return useCoreTracking(screenName);
};