const { dia, ui, shapes, util } = joint;

const PortGroup = {
  IN: "in",
  OUT: "out"
};

const colors = {
  red: "#ed2637",
  black: "#131e29",
  gray: "#dde6ed",
  yellow: "#f6f740",
  blue: "#00a0e9",
  white: "#ffffff"
};

const actions = [
  "read company name",
  "succeeded",
  "failed",
  "is greater than 200",
  "is less or equal than 200"
];

const elementTemplate = new joint.shapes.standard.BorderedImage({
  size: { width: 120, height: 100 },
  attrs: {
    root: {
      magnet: false
    },
    image: {
      x: "calc(w / 2 - calc(s / 2 - 20))",
      y: "calc(h / 2 - calc(s / 2 - 20))",
      width: "calc(s - 40)",
      height: "calc(s - 40)",
      // reset defaults
      refX: null,
      refY: null,
      refWidth: null,
      refHeight: null
    },
    border: {
      rx: 8,
      ry: 8,
      stroke: colors.black,
      strokeWidth: 3
    },
    background: {
      fill: colors.white
    },
    label: {
      fill: colors.black,
      fontSize: 14,
      fontWeight: "bold",
      fontFamily: "sans-serif",
      textWrap: {
        width: "calc(w + 40)",
        height: null
      }
    }
  },
  portMarkup: joint.util.svg`
      <rect @selector="portBody"
        width="20" height="20"
        x="-10" y="-10"
        fill="${colors.red}"
        stroke-width="2"
        stroke="${colors.gray}"
        transform="rotate(45)"
      />
    `,
  ports: {
    groups: {
      [PortGroup.IN]: {
        position: "left",
        attrs: {
          portBody: {
            dataTooltipPosition: "right",
            magnet: "passive"
          }
        }
      },
      [PortGroup.OUT]: {
        position: "right",
        attrs: {
          portBody: {
            dataTooltipPosition: "left",
            magnet: "active"
          }
        }
      }
    }
  }
});

const templateLink = new joint.shapes.standard.Link({
  attrs: {
    line: {
      stroke: colors.black,
      strokeWidth: 2
    }
  },
  defaultLabel: {
    markup: util.svg`
            <rect @selector="labelBody" />
            <text @selector="labelText" />
        `,
    attrs: {
      root: {
        cursor: "pointer"
      },
      labelText: {
        fill: colors.black,
        fontSize: 12,
        fontFamily: "sans-serif",
        fontWeight: "bold",
        textAnchor: "middle",
        textVerticalAnchor: "middle",
        textWrap: {
          width: 100,
          height: null
        }
      },
      labelBody: {
        rx: 4,
        ry: 4,
        ref: "labelText",
        x: "calc(x - 4)",
        y: "calc(y - 4)",
        width: "calc(w + 8)",
        height: "calc(h + 8)",
        fill: colors.white,
        stroke: colors.black,
        strokeWidth: 2
      }
    }
  }
});

const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
  model: graph,
  cellViewNamespace: shapes,
  width: "100%",
  height: "100%",
  gridSize: 20,
  async: true,
  sorting: dia.Paper.sorting.APPROX,
  background: { color: colors.gray },
  linkPinning: false,
  snapLinks: true,
  interactive: { linkMove: false, labelMove: false },
  defaultConnectionPoint: { name: "boundary" },
  clickThreshold: 5,
  magnetThreshold: "onleave",
  markAvailable: true,
  highlighting: {
    connecting: false,
    magnetAvailability: {
      name: "mask",
      options: {
        padding: 1,
        attrs: {
          stroke: colors.blue,
          "stroke-width": 4
        }
      }
    }
  },
  defaultLink: () =>
    createLink(actions[Math.floor(Math.random() * actions.length)]),

  validateMagnet: (sourceView, sourceMagnet) => {
    const sourceGroup = sourceView.findAttribute("port-group", sourceMagnet);
    const sourcePort = sourceView.findAttribute("port", sourceMagnet);
    const source = sourceView.model;
    if (sourceGroup !== PortGroup.OUT) {
      // 'It's not possible to create a link from an inbound port.'
      return false;
    }
    if (getPortLinks(source, sourcePort, false).length > 0) {
      // 'The port has already an inbound link (we allow only one link per port)'
      return false;
    }
    return true;
  },
  validateConnection: (sourceView, sourceMagnet, targetView, targetMagnet) => {
    if (sourceView === targetView) {
      // Do not allow a loop link (starting and ending at the same element)/
      return false;
    }
    const targetGroup = targetView.findAttribute("port-group", targetMagnet);
    const targetPort = targetView.findAttribute("port", targetMagnet);
    const target = targetView.model;
    if (target.isLink()) {
      // We allow connecting only links with elements (not links with links).
      return false;
    }
    if (targetGroup !== PortGroup.IN) {
      // It's not possible to add inbound links to output ports (only outbound links are allowed).
      return false;
    }
    if (getPortLinks(target, targetPort, true).length > 0) {
      // The port has already an inbound link (we allow 1 link per port inbound port)
      return false;
    }
    // This is a valid connection.
    return true;
  }
});

document.getElementById("paper-container").appendChild(paper.el);

// Set tooltip colors to match the demo colors.

paper.el.style.setProperty("--tooltip-color", colors.black);
paper.el.style.setProperty("--tooltip-outline-color", colors.gray);

// Create example elements and links.

const webflow1 = createElement(
  "https://assets.codepen.io/7589991/webflow.svg",
  "Webflow form is submitted"
)
  .set("service", "Webflow")
  .addPorts([
    { group: PortGroup.IN, id: "in1" },
    { group: PortGroup.OUT, id: "out1" }
  ])
  .position(100, 140);

const clearbit1 = createElement(
  "https://logo.clearbit.com/clearbit.com",
  "Retrieve number of employees"
)
  .set("service", "Clearbit")
  .addPorts([
    { group: PortGroup.IN, id: "in1" },
    { group: PortGroup.OUT, id: "out1" },
    { group: PortGroup.OUT, id: "out2" }
  ])
  .position(400, 140);

const slack1 = createElement(
  "https://assets.codepen.io/7589991/slack.svg",
  "Send Message"
)
  .set("service", "Slack")
  .addPorts([
    { group: PortGroup.IN, id: "in1" },
    { group: PortGroup.OUT, id: "out1" }
  ])
  .position(700, 46);

const gmail1 = createElement(
  "https://assets.codepen.io/7589991/gmail.svg",
  "Send Email"
)
  .set("service", "Gmail")
  .addPorts([
    { group: PortGroup.IN, id: "in1" },
    { group: PortGroup.OUT, id: "out1" }
  ])
  .position(700, 240);

const link0 = createLink()
  .set({
    source: { x: 50, y: 190 },
    target: { id: webflow1.id, port: "in1" }
  })
  .attr({
    line: {
      sourceMarker: {
        type: "circle",
        fill: colors.red,
        stroke: colors.gray,
        "stroke-width": 2,
        r: 5
      }
    }
  });

const link1 = createLink(actions[0]).set({
  source: { id: webflow1.id, port: "out1" },
  target: { id: clearbit1.id, port: "in1" }
});

const link2 = createLink(actions[3]).set({
  source: { id: clearbit1.id, port: "out1" },
  target: { id: slack1.id, port: "in1" }
});

const link3 = createLink(actions[4]).set({
  source: { id: clearbit1.id, port: "out2" },
  target: { id: gmail1.id, port: "in1" }
});

graph.addCells([
  webflow1,
  clearbit1,
  slack1,
  gmail1,
  link0,
  link1,
  link2,
  link3
]);

// Show a tooltip when the user clicks on a link. The tooltip shows information
// about the source and target elements.

const portTooltip = new ui.Tooltip({
  rootTarget: paper.svg,
  target: "[port]",
  container: paper.el,
  content: function (portNode) {
    const message = (text) => {
      portTooltip.el.classList.toggle("tooltip-empty", !text);
      if (!text) return false;
      return text;
    };

    const view = paper.findView(portNode);
    if (!view) return;
    const element = view.model;
    const portId = view.findAttribute("port", portNode);
    const portGroup = view.findAttribute("port-group", portNode);
    switch (portGroup) {
      case PortGroup.IN: {
        const [link] = getPortLinks(element, portId, true);
        if (!link) return message("");
        const sourceElement = link.getSourceElement();
        if (!sourceElement)
          return message(
            `<i>${element.attr(
              "label/text"
            )}</i> is the initiating event of the flow.`
          );
        return message(getContentFromConnection(sourceElement, element, link));
      }
      case PortGroup.OUT: {
        const [link] = getPortLinks(element, portId, false);
        if (!link) return message("");
        const targetElement = link.getTargetElement();
        if (!targetElement)
          return message(
            `<i>${element.attr(
              "label/text"
            )}</i> is the final event of the flow.`
          );
        return message(getContentFromConnection(element, targetElement, link));
      }
    }
    return message("");
  },
  direction: "auto",
  padding: 10
});

// Show the image source in the tooltip when the user hovers over the element image.

const serviceTooltip = new joint.ui.Tooltip({
  rootTarget: paper.svg,
  target: "image",
  position: "bottom",
  padding: 30,
  animation: true,
  container: paper.el,
  content: function (imageNode) {
    const view = paper.findView(imageNode);
    if (!view) return;
    return `Service: <i>${view.model.get("service")}</i>`;
  }
});

// Change the link label when the user clicks on the link.

paper.on("link:pointerclick", ({ model: link }) => {
  const currentLabel = link.prop(["labels", 0, "attrs", "labelText", "text"]);
  if (!currentLabel) return;
  const index = actions.indexOf(currentLabel);
  const nextLabel = actions[(index + 1) % actions.length];
  link.prop(["labels", 0, "attrs", "labelText", "text"], nextLabel);
});

// Remove the links that are connected to the port when the user clicks on the port.

paper.on("element:magnet:pointerclick", (elementView, evt, magnet) => {
  evt.stopPropagation();
  const port = elementView.findAttribute("port", magnet);
  const portGroup = elementView.findAttribute("port-group", magnet);
  getPortLinks(
    elementView.model,
    port,
    portGroup === PortGroup.IN
  ).forEach((link) => link.remove());
});

// Hide the tooltip when the user starts dragging an element or a link.
// See CSS for the actual hiding.

paper.on("cell:pointerdown", () => {
  paper.el.classList.add("dragging");
});

paper.on("cell:pointerup", () => {
  paper.el.classList.remove("dragging");
});

// Helpers

function getContentFromConnection(source, target, link) {
  return /* xml */ `
    <div class="connection-tooltip-content">
      If
      <img src="${source.attr("image/xlinkHref")}" width="40" height="40"/>
      <div>
        <i>${source.attr("label/text")} </i>
        →
        <span>
        ${link.prop(["labels", 0, "attrs", "labelText", "text"])}
        </span>
        →
        <i>${target.attr("label/text")}</i>
      </div>
      <img src="${target.attr("image/xlinkHref")}" width="40" height="40"/>
    </div>
  `;
}

function getPortLinks(element, portId, inbound) {
  return graph
    .getConnectedLinks(element, { inbound, outbound: !inbound })
    .filter((link) => {
      const port = inbound ? link.target() : link.source();
      return port.port === portId;
    });
}

function createLink(text) {
  const link = templateLink.clone();
  if (typeof text === "string") {
    link.labels([
      {
        attrs: {
          labelText: {
            fill: colors.gray,
            fontSize: 12,
            fontWeight: "bold",
            fontFamily: "sans-serif",
            text
          },
          labelBody: {
            fill: colors.black
          }
        }
      }
    ]);
  }
  return link;
}

function createElement(xlinkHref, text) {
  return elementTemplate.clone().attr({
    image: {
      xlinkHref
    },
    label: {
      text
    }
  });
}