import { HtmlNodeModel, HtmlNode } from "@logicflow/core";
import { colors } from "../configs";

class ProcessTaskModel extends HtmlNodeModel {
  initNodeData(data: any) {
    super.initNodeData(data);
    this.height = 30;
  }
  getNodeStyle() {
    const style = super.getNodeStyle();
    style.fill = colors.process.background;
    style.stroke = colors.process.border;
    style.strokeWidth = 1;
    return style;
  }
  getDefaultAnchor() {
    const { x, y, id } = this;
    return [
      {
        x: x,
        y: y,
        name: "bottom",
        id: `${id}_0`
      },
      {
        x: x,
        y: y - 15,
        name: "top",
        id: `${id}_0`
      }
    ];
  }
}

class ProcessTask extends HtmlNode {
  setHtml(rootEl: HTMLElement) {
    const el = document.createElement("div");
    el.className = "process-wrapper";

    el.innerHTML = `<div class="content"></div>`;
    rootEl.innerHTML = "";
    rootEl.appendChild(el);
  }
}

export default {
  type: "ProcessTask",
  view: ProcessTask,
  model: ProcessTaskModel
};
