import { Component, h, Host, Listen, Prop } from "@stencil/core";
import { canvasService } from "../corejam-canvas/canvas.machine";
export class CorejamBuilder {
  constructor() {
    this.demoDraggers = [
      {
        id: "Row",
        component: "corejam-box",
        label: "Row",
        props: {
          flex: true,
          h: "100px",
        },
      },
      {
        id: "1/2Box",
        component: "corejam-box",
        label: "Half Box",
        props: {
          w: 6,
          h: "100px",
        },
      },
      {
        id: "Headline",
        component: "corejam-type",
        label: "Headline",
        props: {
          as: "h1",
          weight: "black",
          color: "blue-600",
        },
        initialContent: "Headline",
      },
      {
        id: "Sub headline",
        component: "corejam-type",
        label: "Sub Headline",
        props: {
          as: "h3",
          weight: "black",
          color: "blue-300",
        },
        initialContent: "Sub Headline",
      },
      {
        id: "Paragrap",
        component: "corejam-type",
        label: "Paragraph",
        props: {
          as: "p",
        },
        initialContent: "Lorem Greenum",
      },
    ];
    this.draggers = [];
    this.demo = true;
  }
  componentDidLoad() {
    if (this.demo)
      this.draggers = [...this.draggers, ...this.demoDraggers];
    canvasService.start();
  }
  addDragger(evt) {
    if (evt.detail) {
      this.draggers = [...this.draggers, evt.detail];
    }
  }
  render() {
    return (h(Host, null,
      h("corejam-box", { flex: true, direction: "col", p: 4, class: "draggers" }, this.draggers.map((dragItem) => {
        const Tag = dragItem.component;
        return (h("corejam-box", { h: "25px" },
          h("corejam-box", { py: 2, "data-cy": `dragger-${dragItem.label.toLowerCase()}`, "data-cmp": JSON.stringify(dragItem), "data-draggable": true },
            h("div", { style: { display: "none" } },
              h(Tag, Object.assign({}, dragItem.props), dragItem.initialContent)),
            dragItem.label)));
      }))));
  }
  static get is() { return "corejam-builder"; }
  static get properties() { return {
    "draggers": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "Dragger[]",
        "resolved": "Dragger[]",
        "references": {
          "Dragger": {
            "location": "import",
            "path": "../corejam-canvas/canvas.machine"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    },
    "demo": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "demo",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get listeners() { return [{
      "name": "corejam:canvas:addDragger",
      "method": "addDragger",
      "target": "document",
      "capture": false,
      "passive": false
    }]; }
}
