import { DeesElement, property, html, customElement, cssManager, css, type TemplateResult } from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';

import * as smartdelay from '@push.rocks/smartdelay';

// lets load the Google Script once
const script = document.createElement('script');
script.onload = () => {};
script.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
document.head.appendChild(script);

globalThis.adsbygoogle ? null : globalThis.adsbygoogle = [];
globalThis.adsbygoogle.push({
  google_ad_client: "ca-pub-4104137977476459",
  enable_page_level_ads: false
});

/**
 * the counter for adding multiple ads
 */
let counter = 0;

@customElement('bellini-adsense')
export class BelliniAdSense extends DeesElement {
  public static demo = () => html`<bellini-adsense adSenseSlotId="5326656750"></bellini-adsense>`

  @property()
  public adSenseSlotId: string;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
          z-index: 1;
          background: ${cssManager.bdTheme('#fafafa', '#222')};
          font-family: 'Roboto', sans-serif;
          display: block;
          position: relative;
          box-sizing: border-box;
          width: 100%;
          padding-bottom: 100px;
        }
        :host([hidden]) {
          display: none;
        }

        #adSenseContainer {
          margin: auto;
          max-width: 1200px;
        }

        ${cssManager.cssForTablet(css`
          #adSenseContainer {
            margin: 0px 50px;
          }
        `)}
    `
  ]

  public render(): TemplateResult {
    return html`
      <style>
      </style>
      <div id="adSenseContainer">
        <slot></slot>
      </div>
    `;
  }

  async firstUpdated(changedProperties) {
    await smartdelay.delayFor(10000);
    const injectableElement = document.querySelectorAll('bellini-adsense')[counter];
    counter++;
    const myInsElement = document.createElement('ins');
    myInsElement.classList.add('adsbygoogle');
    myInsElement.style.display = 'block';
    myInsElement.style.overflow = 'hidden';
    myInsElement.style.borderRadius = '7px';
    myInsElement.style.boxShadow = '0px 0px 5px rgba(0,0,0,0.2)';
    myInsElement.setAttribute('data-ad-client', 'ca-pub-4104137977476459');
    myInsElement.setAttribute('data-ad-slot', this.adSenseSlotId);
    myInsElement.setAttribute('data-ad-format', 'auto');
    myInsElement.setAttribute('data-adtest', 'on');

    

    injectableElement.appendChild(myInsElement);

    const adSenseContainer = this.shadowRoot.querySelector('#adSenseContainer');
    // adSenseContainer.appendChild(myInsElement);
    globalThis.adsbygoogle.push({});
  }
}