import Script from 'next/script';

interface ScriptSectionProps {
  tekoTrackingAppId?: string;

  facebookPixelId?: string;
  googleAnalyticsId?: string;
  googleTagManagerId?: string;
  googleAdsId?: string;
  tiktokPixelId?: string;
  configs?: {
    env?: string;
  };
}

export const ScriptSection = ({
  facebookPixelId,
  googleAnalyticsId,
  googleTagManagerId,
  googleAdsId,
  tiktokPixelId,
  tekoTrackingAppId,
}: ScriptSectionProps) => {
  const gaCode = `window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  ${googleAnalyticsId ? `gtag('config', '${googleAnalyticsId}');` : ''} 
  ${googleAdsId ? `gtag('config', '${googleAdsId}');` : ''}`;

  const gtmCode = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','${googleTagManagerId}');`;

  const fbCode = `!function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '${facebookPixelId}');
  fbq('track', 'PageView');
  fbq('track', 'ViewContent');`;

  const tekoTrackingCode = `!function(t,e,r,n,s,a,o,c){t[s]||(t.GlobalTrackerNamespace=t.GlobalTrackerNamespace||[],
    t.GlobalTrackerNamespace.push(s),
    t.GlobalTrackerNamespace.push("https://tracking.tekoapis.com"),
    t[s]=function(){(t[s].q=t[s].q||[]).push(arguments)},t[s].q=t[s].q||[],(o=e.createElement(r)).async=!0,o.src=n,
    (c=e.getElementsByTagName(r)[0]).parentNode.insertBefore(o,c),window.onerror=function(e,r,a,o,c)
  {if(r===n)return t[s]("exception",{msg:e,error:c}),!1})}
  (window,document,"script","https://cdn.tekoapis.com/tracker/dist/v2/tracker.full.min.js","track");
  track("init", "${tekoTrackingAppId}");
  track("enablePageView");track('enableTrackVisibleContentImpressions', true);`;

  const tiktokCode = `!function (w, d, t) {
    w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};
    ttq.load('${tiktokPixelId}');
    ttq.page();
  }(window, document, 'ttq');`;

  return (
    <>
      {(googleAnalyticsId || googleAdsId || googleTagManagerId) && (
        <link
          rel="preconnect"
          href="https://www.googletagmanager.com"
          crossOrigin="anonymous"
        />
      )}
      {googleAnalyticsId && (
        <Script
          id="google-tracking"
          src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}
        />
      )}
      {(googleAnalyticsId || googleAdsId) && (
        <Script
          id="google-analytics"
          dangerouslySetInnerHTML={{
            __html: gaCode,
          }}
        />
      )}

      {googleTagManagerId && (
        <Script
          id="google-tag-manager"
          dangerouslySetInnerHTML={{
            __html: gtmCode,
          }}
        />
      )}
      {facebookPixelId && (
        <>
          <link
            rel="preconnect"
            href="https://connect.facebook.net"
            crossOrigin="anonymous"
          />
          <Script
            id="facebook-pixel"
            dangerouslySetInnerHTML={{
              __html: fbCode,
            }}
          />
          <noscript>
            <img
              alt=""
              height="1"
              width="1"
              style={{
                display: 'none',
              }}
              src={`https://www.facebook.com/tr?id=${facebookPixelId}&ev=PageView&noscript=1`}
            />
          </noscript>
        </>
      )}
      {tekoTrackingAppId && (
        <>
          <link
            rel="preconnect"
            href="https://cdn.tekoapis.com"
            crossOrigin="anonymous"
          />
          <link
            rel="preconnect"
            href="https://footprint-ingestor.tekoapis.com"
            crossOrigin="anonymous"
          />
          <link
            rel="preconnect"
            href="https://tracking.tekoapis.com"
            crossOrigin="anonymous"
          />
          <Script
            id="teko-tracking"
            dangerouslySetInnerHTML={{
              __html: tekoTrackingCode,
            }}
          />
        </>
      )}
      {tiktokPixelId && (
        <>
          <link
            rel="preconnect"
            href="https://analytics.tiktok.com"
            crossOrigin="anonymous"
          />
          <Script
            id="tiktok-pixel"
            dangerouslySetInnerHTML={{
              __html: tiktokCode,
            }}
          />
        </>
      )}
    </>
  );
};