"use client";

import React from "react";
import Script from "next/script";
import { DynamicBodyScripts } from "./dynamic-page-scripts";
import { DynamicHeadScripts } from "./dynamic-head-scripts";

interface Props {
  marketingAnalytics?: any;
  headScripts?: any;
  bodyScripts?: any;
}

const DynamicScripts: React.FC<Props> = ({ marketingAnalytics, headScripts, bodyScripts }) => {
  if (!marketingAnalytics && !headScripts && !bodyScripts) return null;

  return (
    <>
      {marketingAnalytics?.otherHeadScripts && <DynamicHeadScripts scripts={marketingAnalytics.otherHeadScripts} />}
      {headScripts && <DynamicHeadScripts scripts={headScripts} />}

      {marketingAnalytics?.enableGTM && marketingAnalytics?.gtmContainerId && (
        <>
          <Script id="google-tag-manager" strategy="afterInteractive">
            {`
          (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','${marketingAnalytics.gtmContainerId}');
        `}
          </Script>

          <Script
            id="google-tag-manager"
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
              __html: `
            (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','${marketingAnalytics.gtmContainerId}');
          `,
            }}
          />
        </>
      )}

      {marketingAnalytics?.enableGA && marketingAnalytics?.gaMeasurementId && (
        <>
          <Script src={`https://www.googletagmanager.com/gtag/js?id=${marketingAnalytics.gaMeasurementId}`} strategy="afterInteractive" />
          <Script
            id="ga-init"
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
              __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${marketingAnalytics.gaMeasurementId}');
            `,
            }}
          />
        </>
      )}

      {marketingAnalytics?.enableFacebookPixel && marketingAnalytics?.facebookPixelId && (
        <Script
          id="facebook-pixel"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              !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', '${marketingAnalytics.facebookPixelId}');
              fbq('track', 'PageView');
            `,
          }}
        />
      )}

      {marketingAnalytics?.otherBodyScripts && <DynamicBodyScripts scripts={marketingAnalytics.otherBodyScripts} />}
      {bodyScripts && <DynamicBodyScripts scripts={bodyScripts} />}
    </>
  );
};

export default DynamicScripts;