import {h, HtmlNode, HtmlNodeModel} from '@logicflow/core'

class DataView extends HtmlNode {
  getAnchorShape(anchorData) {
    const {x, y, type} = anchorData;
    return h("rect", {
      x: x - 5,
      y: y - 5,
      width: 10,
      height: 10,
      className: `custom-anchor ${type === "left" ? "incomming-anchor" : "outgoing-anchor"}`
    });
  }

  setHtml(rootEl) {
    const {type, properties: {id = "实体对象", props = []}} = this.props.model
    const el = document.createElement('div');
    el.className = type == 'main' ? 'modelElement main' : 'modelElement';
    el.innerHTML = `
    <b>${id}</b>
    <div class="content pad-8">
      ${props.map(e => `<div flex><b class="fill sherk">${e.field}</b><span class="mar-l8 w160 nowrap-text">${e.fieldName||"-"}</span></div>`).join('')}
    </div>`;
    rootEl.setAttribute('class', "pad-8")
    rootEl.style.boxSizing = 'border-box'
    rootEl.innerHTML = ''
    rootEl.appendChild(el);
    this.props.model.height = el.offsetHeight + 16
    this.props.model.width = el.offsetWidth + 16
  }
}

class DataModel extends HtmlNodeModel {
  getAnchorStyle(anchorInfo) {
    const style = super.getAnchorStyle();
    if (anchorInfo.type === "left") {
      style.fill = "red";
      style.hover.fill = "transparent";
      style.hover.stroke = "transpanrent";
      style.className = "lf-hide-default";
    } else {
      style.fill = "green";
    }
    return style;
  }

  getDefaultAnchor() {
    const {
      id,
      x,
      y,
      width,
      height,
      properties: {props}
    } = this;
    const anchors = [];
    props?.forEach((field, index) => {
      anchors.push({
        x: x - width / 2 + 6,
        y: y - height / 2 + 58 + index * 20,
        id: `${id}@${field.field}`,
        edgeAddable: false,
        type: "left"
      });
    });
    return anchors;
  }

  setAttributes() {
    this.text.editable = false
  }
}

class MainModel extends DataModel {
  initNodeData(data) {
    super.initNodeData(data);
  }

  getDefaultAnchor() {
    const {
      id,
      x,
      y,
      width,
      height,
      properties: {props}
    } = this;
    const anchors = [];
    props?.forEach((field, index) => {
      anchors.push({
        x: x + width / 2 - 6,
        y: y - height / 2 + 58 + index * 20,
        id: `${id}@${field.field}`,
        type: "right",
        field
      });
    });
    return anchors;
  }
}

export class ModelElement {
  static pluginName = "modelElement";

  constructor({lf}) {
    this.lf = lf
    lf.register({type: "model", model: DataModel, view: DataView})
    lf.register({type: "main", model: MainModel, view: DataView})
  }
}