import { Component, h, Host, Prop, State } from "@stencil/core";
export class CjDebugger {
  constructor() {
    this.max = false;
    this.machine = null;
  }
  componentWillLoad() {
    this.machineId = this.machine.configuration[0].id;
  }
  render() {
    return (h(Host, { onClick: () => (this.max = !this.max) },
      this.max && (h("corejam-box", { position: "fixed", z: 200, bottom: 20, right: 20, flex: true, w: "4", bg: "orange-200", rounded: "sm", p: 3, direction: "col" },
        h("corejam-type", { size: "sm", color: "gray-500" }, "Machine debugger"),
        h("corejam-type", { size: "xs" },
          "id: ",
          this.machineId),
        h("corejam-type", { size: "xs", weight: "bold" },
          "state: ",
          this.machine.toStrings().join("-")))),
      !this.max && (h("corejam-box", { position: "fixed", z: 200, bottom: 20, right: 20, w: "2", h: "20px", bg: "orange-200", rounded: "full" }))));
  }
  static get is() { return "corejam-debugger"; }
  static get properties() { return {
    "machine": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "machine",
      "reflect": false,
      "defaultValue": "null"
    }
  }; }
  static get states() { return {
    "max": {},
    "machineId": {}
  }; }
}
