import usePublicApi from '../Api';

declare global {
  interface Window {
    dataLayer: Array<Record<string, any>>;
  }
}

export default {
  async install() {
    if (import.meta.env.PROD) return;

    await usePublicApi.customization
      .listTemplateSettings(import.meta.env.VITE_BASE)
      .then(data => {
        const gtmApp = data.apps.find(app => app.code === 'google-tag-manager');
        if (!gtmApp) return;

        this.createGtm(gtmApp.settings['google-tag-manager-id']);
      });
  },

  createGtm(tagId: string) {
    const gtmTag = document.createElement('script');
    gtmTag.innerHTML = `
      (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','${tagId}');
    `;

    document.head.appendChild(gtmTag);
  },
};