export class Edge {
  constructor(graph, type, from, to, weight, data, options = {}) {
    this.graph = graph;
    this.from = from;
    this.to = to;
    this.type = type;
    this.weight = weight;
    this.data = data;
    this.options = options;
    this.installedClickCallback = false;
  }

  reset() {
    this.installedClickCallback = false;
  }

  static getKey({
    from, to, type,
  }) {
    return ['edge', from.id, to.id, type].join(':');
  }

  static getCombinedKey({ from, to }) {
    return ['edge', from.id, to.id].join(':');
  }

  getComorphicEdges() {
    return this.graph.getEdges(null, this.from, this.to);
  }

  getHtml() {
    let html = '<table>';
    for (const { type, weight } of this.getComorphicEdges()) {
      html += `<tr><td>${type}</td><td>${weight}</td></tr>`;
    }
    html += '</table>';
    return html;
  }

  getFlowchartNode() {
    return `${Edge.getCombinedKey(this)}(${this.getHtml()})`;
  }

  displayEdgeNode() {
    if (this.options.hide) {
      return;
    }
    this.graph.flowchart?.log(this.getFlowchartNode());
  }

  displayEdge() {
    if (this.options.hide) {
      return;
    }
    this.graph.flowchart?.log(`${this.from.id} --- ${this.getFlowchartNode()} --> ${this.to.id}`);
    this.graph.flowchart?.log(`class ${Edge.getCombinedKey(this)} edge`);
    if (this.graph.editable && !this.installedClickCallback) {
      this.graph.flowchart?.log(`click ${Edge.getCombinedKey(this)} WDGHandler${this.graph.index} "Edit Edge"`);
      this.installedClickCallback = true;
    }
  }

  static prepareEditorDocument(graph, doc, from, to) {
    doc.clear();
    const form = doc.form({ name: 'editorForm' }).lastElement;
    doc.remark('<h3>Edit Edge</h3>', { parentEl: form.el });
    form
      .textField({
        id: 'from', name: 'from', defaultValue: from, disabled: true,
      })
      .textField({
        id: 'to', name: 'to', defaultValue: to, disabled: true,
      });

    const subFormArray = form.subFormArray({ id: 'edges', name: 'edges' }).lastItem;
    const addEdgeForm = (edge) => {
      const { subForm } = form.subForm({ name: 'subform', subFormArray }).lastItem;
      doc.remark('<br/>', { parentEl: subForm.el });
      subForm.textField({ id: 'type', name: 'type', defaultValue: edge.type });
      subForm.textField({ id: 'weight', name: 'weight', defaultValue: edge.weight });
      subForm.button({
        id: 'remove',
        name: 'Remove Edge Type',
        cb: (_, { initializing }) => {
          if (initializing) return;
          subFormArray.remove(subForm);
        },
      });
    };

    for (const edge of graph.getEdges(null, from, to)) {
      addEdgeForm(edge);
    }

    form.button({
      id: 'add',
      name: 'Add Edge Type',
      cb: (_, { initializing }) => {
        if (initializing) return;
        addEdgeForm(new Edge(graph, null, graph.getVertex(from), graph.getVertex(to)));
      },
    });

    form.button({
      id: 'save',
      name: 'Save',
      cb: ({ form: { value } }, { initializing }) => {
        if (initializing) return;
        // Handle additions and updates
        for (const { type, weight } of value.edges) {
          graph.setEdgeWeight(type, from, to, weight);
        }
        // Handle removals
        for (const edge of graph.getEdges(null, from, to)) {
          if (!value.edges.find(({ type }) => type === edge.type)) {
            graph.deleteEdge(edge.type, from, to);
          }
        }
        graph.redraw();
      },
    });
  }
}