import { Build, Component, Element, h, Host, Prop, State } from "@stencil/core";
export class Image {
  constructor() {
    this.w = 12;
    this.maxWidth = 100;
    this.lazy = false;
    this.onIntersection = async (entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          if (this.observer) {
            this.observer.disconnect();
          }
          if (entry.target.getAttribute("data-src")) {
            entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
            entry.target.removeAttribute("data-src");
          }
        }
      }
    };
    this._relevantProps = ["w", "maxWidth", "h", "maxH", "fit", "rounded"];
  }
  componentDidLoad() {
    if (Build.isBrowser && this.lazy)
      this.setupObserver();
  }
  async componentWillLoad() {
    await this.computeStyles();
  }
  async computeStyles() {
    const hash = await (await import("../../utils/style")).calculateStyles(this);
    this.hash = hash;
  }
  setupObserver() {
    const img = this.el.shadowRoot.querySelector("img");
    if (img) {
      this.observer = new IntersectionObserver(this.onIntersection);
      this.observer.observe(img);
    }
  }
  render() {
    const srcProps = {};
    this.lazy ? (srcProps["data-src"] = this.src) : (srcProps["src"] = this.src);
    return (h(Host, { as: "image", alt: this.alt },
      h("img", Object.assign({}, srcProps, { alt: this.alt, class: this.hash }))));
  }
  static get is() { return "corejam-image"; }
  static get properties() { return {
    "src": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "src",
      "reflect": true
    },
    "alt": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "alt",
      "reflect": true
    },
    "w": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "w",
      "reflect": true,
      "defaultValue": "12"
    },
    "maxWidth": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "max-width",
      "reflect": true,
      "defaultValue": "100"
    },
    "h": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "h",
      "reflect": true
    },
    "maxH": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "max-h",
      "reflect": true
    },
    "fit": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"cover\"",
        "resolved": "\"cover\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "fit",
      "reflect": true
    },
    "rounded": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"full\"",
        "resolved": "\"full\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "rounded",
      "reflect": true
    },
    "lazy": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "lazy",
      "reflect": true,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "hash": {}
  }; }
  static get elementRef() { return "el"; }
}
