import go from "gojs";

export function transitionTemplate() {
  const $ = go.GraphObject.make; // for conciseness in defining templates

  // some constants that will be reused within templates
  const mtb8 = new go.Margin(8, 0, 8, 0);
  const mr8 = new go.Margin(0, 8, 0, 0);
  const ml8 = new go.Margin(0, 0, 0, 8);
  const mrl8 = new go.Margin(0, 8, 0, 8);

  const roundedRectangleParams = {
    parameter1: 2, // set the rounded corner
    spot1: go.Spot.TopLeft,
    spot2: go.Spot.BottomRight // make content go all the way to inside edges of rounded corners
  };

  // define Converters to be used for Bindings
  function iconConverter(value) {
    return value;
  }

  // Create a Vertical Panel.
  function makeVerticalPanel(
    binding: string,
    side: "left" | "right",
    portSize = new go.Size(8, 8)
  ) {
    let order: any = [];
    if (side === "left") {
      order = [
        $(
          go.Shape,
          "RoundedRectangle",
          {
            stroke: null,
            strokeWidth: 0,
            desiredSize: portSize,
            margin: new go.Margin(1, 0)
          },
          new go.Binding("fill", "portColor")
        ),
        $(
          go.TextBlock,
          {
            row: 0,
            alignment: go.Spot.Left,
            font: "16px Roboto, sans-serif",
            stroke: "rgba(0, 0, 0, .87)",
            margin: mrl8
          },
          new go.Binding("text", "label")
        )
      ];
    } else {
      order = [
        $(
          go.TextBlock,
          {
            row: 0,
            alignment: go.Spot.Left,
            font: "16px Roboto, sans-serif",
            stroke: "rgba(0, 0, 0, .87)",
            maxSize: new go.Size(160, NaN),
            margin: mrl8
          },
          new go.Binding("text", "label")
        ),
        $(
          go.Shape,
          "RoundedRectangle",
          {
            stroke: null,
            strokeWidth: 0,
            desiredSize: portSize,
            margin: new go.Margin(1, 0)
          },
          new go.Binding("fill", "portColor")
        )
      ];
    }

    return $(go.Panel, "Vertical", new go.Binding("itemArray", binding), {
      alignment: side === "left" ? go.Spot.Left : go.Spot.Right,
      itemTemplate: $(
        go.Panel,
        "Horizontal",
        {
          _side: side, // internal property to make it easier to tell which side it's on
          toSpot: go.Spot.Left,
          fromSpot: go.Spot.RightSide,
          fromLinkable: side !== "left",
          toLinkable: side === "left",
          cursor: "pointer",
          alignment: side === "left" ? go.Spot.Left : go.Spot.Right
        },
        new go.Binding("portId", "portId"),
        ...order
      ) // end itemTemplate
    }); // end Vertical Panel
  }

  // This function provides a common style for most of the TextBlocks.
  // Some of these values may be overridden in a particular TextBlock.
  function textStyle(field) {
    return [
      {
        font: "12px Roboto, sans-serif",
        stroke: "rgba(0, 0, 0, .60)",
        visible: false // only show textblocks when there is corresponding data for them
      },
      new go.Binding("visible", field, function (val) {
        return val !== undefined;
      })
    ];
  }

  // Define a function for creating a "port" that is normally transparent.
  // The "name" is used as the GraphObject.portId,
  // the "align" is used to determine where to position the port relative to the body of the node,
  // the "spot" is used to control how links connect with the port and whether the port
  // stretches along the side of the node,
  // and the boolean "output" and "input" arguments control whether the user can draw links from or to the port.
  function makePort(name, align, spot, output, input) {
    const horizontal =
      align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
    // the port is basically just a transparent rectangle that stretches along the side of the node,
    // and becomes colored when the mouse passes over it
    return $(go.Shape, {
      fill: "transparent", // changed to a color in the mouseEnter event handler
      strokeWidth: 0, // no stroke
      width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
      height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
      alignment: align, // align the port on the main Shape
      stretch: horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical,
      portId: name, // declare this object to be a "port"
      fromSpot: spot, // declare where links may connect at this port
      fromLinkable: output, // declare whether the user may draw links from here
      toSpot: spot, // declare where links may connect at this port
      toLinkable: input, // declare whether the user may draw links to here
      cursor: "pointer", // show a different cursor to indicate potential link point
      mouseEnter: function (e, port) {
        // the PORT argument will be this Shape
        if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
      },
      mouseLeave: function (e, port) {
        port.fill = "transparent";
      }
    });
  }

  return $(
    go.Node,
    "Auto",
    {
      locationSpot: go.Spot.Top,
      isShadowed: true,
      shadowBlur: 1,
      shadowOffset: new go.Point(0, 1),
      shadowColor: "rgba(0, 0, 0, .14)",
      // selection adornment to match shape of nodes
      selectionAdornmentTemplate: $(
        go.Adornment,
        "Auto",
        $(go.Shape, "RoundedRectangle", roundedRectangleParams, {
          fill: null,
          stroke: "#7986cb",
          strokeWidth: 3
        }),
        $(go.Placeholder)
      ) // end Adornment
    },
    $(
      go.Shape,
      "RoundedRectangle",
      roundedRectangleParams,
      { name: "SHAPE", fill: "#ffffff", strokeWidth: 1 },
      // gold if highlighted, white otherwise
      new go.Binding("fill", "isHighlighted", function (h) {
        return h ? "gold" : "#ffffff";
      }).ofObject()
    ),
    $(
      go.Panel,
      "Vertical",
      {
        stretch: go.GraphObject.Fill
      },
      $(
        go.Panel,
        "Horizontal",
        { margin: 8 },
        $(
          go.Picture, // flag image, only visible if a nation is specified
          { margin: mr8, visible: false, desiredSize: new go.Size(50, 50) },
          new go.Binding("source", "icon", iconConverter),
          new go.Binding("visible", "icon", function (nat) {
            return nat !== undefined;
          })
        ),
        $(
          go.Panel,
          "Table",
          {
            stretch: go.GraphObject.Horizontal
          },
          $(
            go.TextBlock,
            {
              row: 0,
              alignment: go.Spot.Left,
              font: "16px Roboto, sans-serif",
              stroke: "rgba(0, 0, 0, .87)"
            },
            new go.Binding("text", "label")
          ),
          $(
            go.TextBlock,
            textStyle("description"),
            {
              row: 1,
              alignment: go.Spot.Left
            },
            new go.Binding("text", "description")
          ),
          $("PanelExpanderButton", "GUARD", {
            row: 0,
            column: 1,
            rowSpan: 2,
            margin: ml8
          }),
          $("PanelExpanderButton", "SERVICE", {
            row: 1,
            column: 1,
            rowSpan: 2,
            margin: ml8
          })
        )
      ),
      // Horizontal Lane as devider:
      $(
        go.Shape,
        "LineH",
        {
          stroke: "rgba(0, 0, 0, .60)",
          strokeWidth: 1,
          height: 1,
          stretch: go.GraphObject.Horizontal
        },
        new go.Binding("visible").ofObject("GUARD") // only visible when info is expanded
      ),
      // Vertiacal Layout Holding the Guard
      $(
        go.Panel,
        "Auto",
        {
          margin: mtb8,
          stretch: go.GraphObject.Fill,
          name: "GUARD"
        },
        makeVerticalPanel("guardInputs", "left"),
        $(
          go.TextBlock,
          {
            row: 0,
            alignment: go.Spot.Center,
            font: "16px Roboto, sans-serif",
            stroke: "rgba(0, 0, 0, .87)",
            margin: mrl8
          },
          new go.Binding("text", "guard")
        ),
        makeVerticalPanel("guardOutputs", "right")
      ),
      $(
        go.Shape,
        "LineH",
        {
          stroke: "rgba(0, 0, 0, .60)",
          strokeWidth: 1,
          height: 1,
          stretch: go.GraphObject.Horizontal
        },
        new go.Binding("visible").ofObject("SERVICE") // only visible when info is expanded
      ),

      $(
        go.Panel,
        "Auto",
        { margin: mtb8, stretch: go.GraphObject.Fill, name: "SERVICE" },
        makeVerticalPanel("serviceInputs", "left"),
        $(
          go.TextBlock,
          {
            row: 0,
            alignment: go.Spot.Center,
            font: "16px Roboto, sans-serif",
            stroke: "rgba(0, 0, 0, .87)",
            margin: mrl8
          },
          new go.Binding("text", "serviceName")
        ),
        makeVerticalPanel("serviceOutputs", "right")
      )
    ),
    makePort("T", go.Spot.Top, go.Spot.Top, false, true),
    makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
  );
}