import { Component, Method, State, h } from '@stencil/core';
import PrismicDOM from 'prismic-dom';
import { getAd } from './ad-service';
import { trackClick, trackView } from '../../utils/tracking-service';
export class InternalAd {
  constructor() {
    this.update();
  }
  async update() {
    this.ad = await getAd();
    if (!this.ad) {
      return;
    }
    // give the page a chance to reflow
    this.timeout = setTimeout(() => {
      trackView(this.ad.ad_id);
    }, 50);
  }
  disconnectedCallback() {
    // if the reflowed page doesn't have an ad, don't fire view events
    clearTimeout(this.timeout);
  }
  render() {
    if (!this.ad || Object.keys(this.ad).length === 0) {
      return;
    }
    return (h("a", { href: this.ad.ad_url.url, target: this.ad.ad_url.target, onClick: e => trackClick(this.ad.ad_id, e) },
      h("picture", null,
        h("source", { media: "(min-width: 37.5em)", src: this.ad.ad_image.url }),
        h("source", { src: this.ad.ad_image['1x'].url }),
        h("img", { src: this.ad.ad_image.url, alt: this.ad.ad_image.alt, height: this.ad.ad_image['1x'].dimensions.height, width: this.ad.ad_image['1x'].dimensions.width }),
        h("p", null, this.ad.ad_image.alt)),
      h("div", { innerHTML: PrismicDOM.RichText.asHtml(this.ad.ad_copy) })));
  }
  static get is() { return "internal-ad"; }
  static get originalStyleUrls() { return {
    "$": ["internal-ad.css"]
  }; }
  static get styleUrls() { return {
    "$": ["internal-ad.css"]
  }; }
  static get states() { return {
    "ad": {}
  }; }
  static get methods() { return {
    "update": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
}
