import Script from "next/script";

const beforeSendScript = `
window.umamiBeforeSend = function (_type, payload) {
  try {
    var rawUrl = payload && typeof payload.url === "string" ? payload.url : window.location.href;
    var pathname = new URL(rawUrl, window.location.origin).pathname;
    var isTrackable =
      pathname === "/zh" ||
      pathname === "/en" ||
      pathname.startsWith("/zh/") ||
      pathname.startsWith("/en/");

    return isTrackable ? payload : false;
  } catch (_error) {
    return false;
  }
};
`;

export function UmamiMetrics() {
  const hostUrl = process.env.NEXT_PUBLIC_UMAMI_HOST_URL?.replace(/\/+$/, "");
  const websiteId = process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID;
  const domains = process.env.NEXT_PUBLIC_UMAMI_DOMAINS;

  if (!hostUrl || !websiteId) {
    return null;
  }

  return (
    <>
      <Script id="umami-before-send" strategy="beforeInteractive">
        {beforeSendScript}
      </Script>
      <Script
        id="umami-script"
        src={`${hostUrl}/script.js`}
        strategy="afterInteractive"
        data-website-id={websiteId}
        data-host-url={hostUrl}
        data-domains={domains || undefined}
        data-before-send="umamiBeforeSend"
        data-exclude-search="true"
        data-exclude-hash="true"
        data-do-not-track="true"
        data-performance="true"
      />
    </>
  );
}