import { useMemo } from 'react';

import type { DisplayBanner } from '@redocly/theme/components/Banner/Banner';

import { useThemeHooks } from './use-theme-hooks';

const noop = (): void => {};
const noopLink = (_href: string): void => {};

export type BannerTelemetryActions = {
  sendBannerViewedMessage: () => void;
  sendBannerDismissedMessage: () => void;
  sendBannerLinkClickedMessage: (href: string) => void;
};

export function useBannerTelemetry(
  displayBanner: DisplayBanner | undefined,
): BannerTelemetryActions {
  const { useTelemetry } = useThemeHooks();
  const telemetry = useTelemetry();

  return useMemo(() => {
    if (!displayBanner) {
      return {
        sendBannerViewedMessage: noop,
        sendBannerDismissedMessage: noop,
        sendBannerLinkClickedMessage: noopLink,
      };
    }

    const bannerUri = 'urn:redocly:realm:ui:banner:banner-id';
    const payload = {
      id: 'banner-id' as const,
      object: 'banner' as const,
      uri: bannerUri,
      trackingId: displayBanner.trackingId,
      hash: displayBanner.hash,
      color: displayBanner.color,
      target: displayBanner.target,
      dismissible: displayBanner.dismissible,
    };

    return {
      sendBannerViewedMessage: () => {
        telemetry.sendBannerViewedMessage([payload]);
      },
      sendBannerDismissedMessage: () => {
        const { dismissible: _, ...dismissedPayload } = payload;
        telemetry.sendBannerDismissedMessage([dismissedPayload]);
      },
      sendBannerLinkClickedMessage: (href: string) => {
        telemetry.sendBannerLinkClickedMessage([{ ...payload, href }]);
      },
    };
  }, [displayBanner, telemetry]);
}