import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
import gql from "graphql-tag";
import { coreState } from "../../store/core";
export class DataFetcher {
  constructor() {
    this.data = null;
  }
  async componentWillLoad() {
    if (this.query) {
      this.fetchData();
    }
  }
  async fetchData() {
    this.data = await coreState.client.query({ query: gql(this.query) });
  }
  renderData() {
    if (!this.query)
      return "No query.";
    if (this.renderer) {
      if (!this.data)
        this.renderer({ loading: true });
      if (this.data)
        this.renderer({ loading: false, data: this.data });
    }
    else {
      if (!this.data)
        return "Loading...";
      if (this.data)
        return JSON.stringify(this.data);
    }
  }
  render() {
    return h(Host, null, this.renderData());
  }
  static get is() { return "corejam-data-fetcher"; }
  static get properties() { return {
    "query": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "query",
      "reflect": true
    },
    "renderer": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Function",
        "resolved": "Function",
        "references": {
          "Function": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "data": {}
  }; }
  static get watchers() { return [{
      "propName": "query",
      "methodName": "fetchData"
    }]; }
}
