'use client';

import * as React from 'react';

import { ConfigContext } from '@/context';

const PARAM_SITE = 'tidb_cloud';

declare global {
  interface Window {
    dataLayer: any;
    allWebsitesDataLayer: any;
  }
}

function sendAllWebsiteGTMEvent(
  event: {
    event?: string;
    site: string;
  } & Record<string, string | number | boolean | undefined>,
) {
  const customDatalayerObj =
    window?.allWebsitesDataLayer || window?.dataLayer || [];
  customDatalayerObj.push({
    ...event,
    page_category2: 'serverless_promotion',
  });
}

export function GTMPageView(props: {
  site?: string;
  page_category?: string;
  page_category2?: string;
  docs_tidb_version?: string;
  docs_language?: string;
}) {
  const {
    site = PARAM_SITE,
    page_category,
    page_category2,
    docs_tidb_version,
    docs_language,
  } = props;
  const { cookiePolicyAccepted } = React.useContext(ConfigContext);

  React.useEffect(() => {
    cookiePolicyAccepted !== 'rejectedAll' &&
      sendAllWebsiteGTMEvent({
        site,
        page_category,
        page_category2,
        docs_tidb_version,
        docs_language,
      });
  }, [
    docs_language,
    docs_tidb_version,
    page_category,
    page_category2,
    site,
    cookiePolicyAccepted,
  ]);

  return null;
}

export const GTMEvent =
  (event: {
    event: string,
    page_category?: string;
    page_category2?: string;
    product_type?: string;
    button_name?: string;
    position?: string;
    item_name?: string;
  }) =>
  (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
    sendAllWebsiteGTMEvent({
      site: PARAM_SITE,
      ...event,
    });
  };

export const goToCloudSignupClick =
  (event: {
    page_category?: string;
    page_category2?: string;
    product_type?: string;
    button_name?: string;
    position?: string;
  }) =>
  (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
    sendAllWebsiteGTMEvent({
      event: 'go_to_cloud_signup',
      site: PARAM_SITE,
      product_type: 'serverless',
      ...event,
    });
  };

export const leadFormSubmitClick = (event: {
  page_category?: string;
  page_category2?: string;
  product_type?: string;
  button_name?: string;
  lead_type?: string;
  position?: string;
}) => {
  sendAllWebsiteGTMEvent({
    event: 'lead_form_submit_click',
    site: PARAM_SITE,
    ...event,
  });
};

export const leadFormSubmitComplete = (event: {
  page_category?: string;
  page_category2?: string;
  product_type?: string;
  button_name?: string;
  lead_type?: string;
  position?: string;
}) => {
  sendAllWebsiteGTMEvent({
    event: 'lead_form_submit_complete',
    site: PARAM_SITE,
    ...event,
  });
};

export const goToGitHubClick = (event: {
  page_category?: string;
  page_category2?: string;
  position?: string;
  gh_target?: string; // '/pingcap/tidb'
}) => {
  sendAllWebsiteGTMEvent({
    event: 'go_to_github',
    site: PARAM_SITE,
    product_type: 'serverless',
    gh_target: '/pingcap/tidb',
    ...event,
  });
};

export const updateGTMConsent = (consent: 'denied' | 'granted') => {
  gtag?.('consent', 'update', {
    ad_storage: consent,
    ad_user_data: consent,
    ad_personalization: consent,
    analytics_storage: consent,
  });
};