import React from "react";

import { useTracking } from "../../services/tracking/tracking";
import { useLocation } from "react-router";
import { PRESENTATION_MODES } from "../presentationModes";

const ROUTER_PAGE_TRACKING_ENABLED =
  import.meta.env.VITE_MATOMO_ENABLE_ROUTER_PAGE_TRACKING === "true";

const BASE_TITLE = "SIAG ES Digital Exhibitions";

// "/rad-enablement/cancer-2" -> "Rad Enablement - cancer-2", "/" -> base title
const titleForPath = (pathname) => {
  const mode = PRESENTATION_MODES.find(
    ({ path }) => pathname === path || pathname.startsWith(`${path}/`)
  );
  if (!mode) return BASE_TITLE;
  const viewId = pathname.slice(mode.path.length + 1);
  return viewId ? `${mode.label} - ${viewId}` : mode.label;
};

/**
 * Invisible helper mounted next to the routes (see Routes.jsx): keeps
 * `document.title` in sync with the current route and, when
 * VITE_MATOMO_ENABLE_ROUTER_PAGE_TRACKING is "true", reports every route
 * change as a Matomo pageview.
 */
export const GeneralPageTracking = () => {
  const { trackPageView } = useTracking();
  const location = useLocation();

  React.useEffect(() => {
    // per-route titles so Matomo pageviews don't all share one title
    document.title = titleForPath(location.pathname);

    if (!ROUTER_PAGE_TRACKING_ENABLED) return;

    if (trackPageView) {
      trackPageView(location.pathname, document.title);
    }
  }, [trackPageView, location]);

  return null;
};