import { memo, useEffect } from 'react';
import Script from 'next/script';

import { OneTrustGroups } from '~/src/lib/oneTrust/types';
import { useTracker } from '~/src/lib/tracker/useTracker';
import { on } from '~/src/lib/utils/events';
import { resolveScriptId } from './utils';

const mapOneTrustGroup = (group: string) => {
  switch (group) {
    case OneTrustGroups.STRICTLY_NECESSARY:
      return 'strictly_necessary';
    case OneTrustGroups.PERFORMANCE:
      return 'performance';
    case OneTrustGroups.FUNCTIONAL:
      return 'functional';
    case OneTrustGroups.TARGETING:
      return 'targeting';
    case OneTrustGroups.SOCIAL_MEDIA:
      return 'social_media';
    default:
      return group;
  }
};

const OneTrust = memo(
  ({ sendConsentEvent }: { sendConsentEvent?: boolean }) => {
    const { trackEvent } = useTracker();
    const scriptId = resolveScriptId();

    useEffect(() => {
      if (!sendConsentEvent) return;

      return on(
        window,
        'OneTrustGroupsUpdated',
        (event: CustomEvent<string[]>) => {
          trackEvent({
            type: 'gdpr-consent',
            groups: event.detail.map(mapOneTrustGroup),
          });
        }
      );
    }, [sendConsentEvent]);

    useEffect(() => {
      return () => {
        // Remove OneTrust banner and PC html when component is unmounted
        // to avoid UI persisting on pages where banner should not exist
        document.getElementById('onetrust-consent-sdk')?.remove();
      };
    }, []);

    return (
      <>
        <style jsx global>{`
          /* Re-write our global svg css style to avoid banner svg misplacement */
          #onetrust-consent-sdk svg,
          #ot-sdk-btn-floating svg {
            display: inline;
          }

          .ot-pc-footer-logo,
          #ot-sdk-btn-floating {
            display: none;
          }

          #onetrust-consent-sdk #onetrust-banner-sdk,
          #onetrust-consent-sdk #onetrust-pc-sdk * {
            outline: 0 !important;
          }

          #onetrust-pc-sdk .ot-pc-header,
          #onetrust-pc-sdk .ot-pc-footer,
          #onetrust-pc-sdk .ot-accordion-layout.ot-cat-item {
            border: 0 !important;
          }
        `}</style>

        <Script
          src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
          data-document-language="true"
          type="text/javascript"
          charSet="UTF-8"
          data-testid="onetrust-script"
          data-domain-script={scriptId}
          async
        />
      </>
    );
  }
);

export default OneTrust;