OpenFrontIO/src/client/GoogleAdElement.ts

import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { Platform } from "./Platform";

declare global {
  interface Window {
    adsbygoogle: unknown[];
  }
}

/**
 * Google AdSense integration component
 *
 * This component creates a configurable container for Google AdSense ads
 * and properly initializes them after the component is rendered.
 */
@customElement("google-ad")
export class GoogleAdElement extends LitElement {
  // Configurable properties
  @property({ type: String }) adClient = "ca-pub-7035513310742290";
  @property({ type: String }) adSlot = "5220834834";
  @property({ type: String }) adFormat = "auto";
  @property({ type: Boolean }) fullWidthResponsive = true;
  @property({ type: String }) adTest = "off"; // "on" for testing, remove or set to "off" for production

  // Disable shadow DOM so AdSense can access the elements
  createRenderRoot() {
    return this;
  }

  render() {
    if (Platform.isElectron) {
      return html``;
    }
    return html`
      <div class="mt-4 rounded-lg p-2 w-full overflow-hidden">
        <ins
          class="adsbygoogle block"
          data-ad-client="${this.adClient}"
          data-ad-slot="${this.adSlot}"
          data-ad-format="${this.adFormat}"
          data-full-width-responsive="${this.fullWidthResponsive}"
          data-adtest="${this.adTest}"
        ></ins>
      </div>
    `;
  }

  connectedCallback() {
    super.connectedCallback();

    if (Platform.isElectron) {
      return;
    }

    // Wait for the component to be fully rendered
    setTimeout(() => {
      try {
        // Initialize this specific ad
        (window.adsbygoogle = window.adsbygoogle || []).push({});
        console.log("Ad initialized for slot:", this.adSlot);
      } catch (e) {
        console.error("AdSense initialization error for slot:", this.adSlot, e);
      }
    }, 100);
  }
}

export default GoogleAdElement;