import Script from "next/script";
import React, { Fragment } from "react";
import { GoogleTagManager, GoogleAnalytics } from "@next/third-parties/google";

export const Tracking = ({ googleTagManagerID, nonce, cookieObj }) => {
    return (
        <Fragment>
            <script
                nonce={nonce}
                async
                // strategy="afterInteractive"
                src={`https://www.googletagmanager.com/gtag/js?id=${googleTagManagerID}`}
            />
            <script
                nonce={nonce}
                async
                id="google-analytics"
                // strategy="afterInteractive"
                dangerouslySetInnerHTML={{
                    __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());

                gtag('consent', 'default', {
                    'analytics_storage': 'granted',
                    'ad_storage': 'denied',
                    'ad_user_data': 'denied',
                    'ad_personalization': 'denied'
                });
                
                gtag('config', '${googleTagManagerID}', {
                    page_path: window.location.pathname,
                });
                
                gtag('consent', 'update', {'analytics_storage': '${
                    typeof cookieObj == "string" &&
                    JSON.parse(cookieObj).hasOwnProperty("analytics_storage")
                        ? JSON.parse(cookieObj).analytics_storage
                        : "denied"
                }'});
                `,
                }}
            />

            {/* <GoogleAnalytics gaId={googleTagManagerID} /> */}

            {/* <GoogleTagManager gtmId={googleTagManagerID} /> */}
        </Fragment>
    );
};

export const TrackingNoScript = ({ googleTagManagerID, nonce }) => (
    <Fragment>
        <noscript>
            <iframe
                nonce={nonce}
                title="google analytics"
                src={`https://www.googletagmanager.com/ns.html?id=${googleTagManagerID}`}
                height="0"
                width="0"
                style={{ display: "none", visibility: "hidden" }}
            />
        </noscript>
    </Fragment>
);