provider.tsx

'use client';

import { useConsentManager } from '@c15t/nextjs/client';
import { PropsWithChildren, useEffect, useRef } from 'react';

import { FragmentOf } from '~/client/graphql';
import { Analytics } from '~/lib/analytics';
import { GoogleAnalyticsProvider } from '~/lib/analytics/providers/google-analytics';
import { MetaPixelProvider } from '~/lib/analytics/providers/meta-pixel';
import { AnalyticsProvider as AnalyticsProviderLib } from '~/lib/analytics/react';
import { AnalyticsProvider as AnalyticsProviderType } from '~/lib/analytics/types';
import { getConsentCookie } from '~/lib/consent-manager/cookies/client';

import { WebAnalyticsFragment } from './fragment';

interface Props {
  channelId: number;
  isCookieConsentEnabled: boolean;
  settings?: FragmentOf<typeof WebAnalyticsFragment> | null;
}

const getConsent = () => {
  const consentCookie = getConsentCookie();

  if (!consentCookie) {
    return null;
  }

  return {
    functionality: consentCookie['c.functionality'],
    marketing: consentCookie['c.marketing'],
    measurement: consentCookie['c.measurement'],
    necessary: consentCookie['c.necessary'],
  };
};

const getAnalytics = ({ channelId, isCookieConsentEnabled, settings }: Props): Analytics | null => {
  if (!channelId) {
    return null;
  }

  const providers: AnalyticsProviderType[] = [];

  if (settings?.webAnalytics?.ga4?.tagId) {
    providers.push(
      new GoogleAnalyticsProvider({
        gaId: settings.webAnalytics.ga4.tagId,
        consentModeEnabled: isCookieConsentEnabled,
        developerId: 'dMjk3Nj',
        getConsent,
      }),
    );
  }

  if (settings?.webAnalytics?.metaPixel?.pixelId) {
    providers.push(
      new MetaPixelProvider({
        pixelId: settings.webAnalytics.metaPixel.pixelId,
        consentModeEnabled: isCookieConsentEnabled,
        getConsent,
      }),
    );
  }

  if (providers.length === 0) {
    return null;
  }

  return new Analytics({ channelId, providers });
};

export function AnalyticsProvider({
  channelId,
  isCookieConsentEnabled,
  settings,
  children,
}: PropsWithChildren<Props>) {
  const { consents } = useConsentManager();
  const prevConsentsRef = useRef<Record<string, boolean> | null>(null);

  const analytics = getAnalytics({
    channelId,
    isCookieConsentEnabled,
    settings,
  });

  // Update consent when user changes preferences
  useEffect(() => {
    if (!isCookieConsentEnabled || !analytics) {
      return;
    }

    const currentConsents = consents;
    const prevConsents = prevConsentsRef.current;

    // Check if consents have changed
    if (prevConsents && JSON.stringify(currentConsents) !== JSON.stringify(prevConsents)) {
      const consentState = getConsent();

      if (consentState) {
        analytics.consent.consentUpdated(consentState);
      }
    }

    prevConsentsRef.current = currentConsents;
  }, [isCookieConsentEnabled, analytics, consents]);

  return <AnalyticsProviderLib analytics={analytics ?? null}>{children}</AnalyticsProviderLib>;
}