import React from 'react';
import classNames from 'classnames';
import { SYMBOL_WIDTH } from '../constants';
import Arrow from '../Icons/Arrow';
import './index.less';
var SINGLE_CRUMB_SHIFT = 22;
export var PartEdge = function PartEdge(props) {
  var sourcePosition = props.sourcePosition,
      parentName = props.parentName,
      ccAlightPoint = props.ccAlightPoint,
      singleCrumb = props.singleCrumb;
  var nameWidth = SYMBOL_WIDTH * parentName.length;
  var padding = 17;
  var P1 = {
    x: sourcePosition.x + nameWidth + padding,
    y: sourcePosition.y
  };
  var P2 = {
    x: ccAlightPoint - padding - 5 + (singleCrumb ? SINGLE_CRUMB_SHIFT : 0),
    y: P1.y
  };
  var polylinePoints = [[P1.x, P1.y], [P2.x, P2.y]];
  return React.createElement(React.Fragment, null, React.createElement("polyline", {
    points: polylinePoints.join(', '),
    className: 'CodeCrumbEdge',
    strokeDasharray: "2"
  }), React.createElement("line", {
    x1: P1.x,
    y1: P1.y - 2,
    x2: P1.x,
    y2: P1.y + 2,
    className: 'CodeCrumbEdge'
  }));
};
export var CodeCrumbMultiEdge = function CodeCrumbMultiEdge(props) {
  var sourcePosition = props.sourcePosition,
      targetPosition = props.targetPosition,
      ccAlightPoint = props.ccAlightPoint;
  var edgeTurnDistance = SINGLE_CRUMB_SHIFT;
  var xStart = ccAlightPoint || targetPosition.x;
  var P2 = {
    x: xStart - edgeTurnDistance,
    y: sourcePosition.y
  };
  var P3 = {
    x: xStart - edgeTurnDistance,
    y: targetPosition.y
  };
  var P4 = targetPosition;
  var polylinePoints = [[P2.x, P2.y], [P3.x, P3.y], [P4.x, P4.y]];
  return React.createElement("polyline", {
    points: polylinePoints.join(', '),
    className: 'CodeCrumbEdge',
    strokeDasharray: "2"
  });
};
export var CodeCrumbedFlowEdge = function CodeCrumbedFlowEdge(props) {
  var sourcePosition = props.sourcePosition,
      targetPosition = props.targetPosition,
      sourceName = props.sourceName,
      selected = props.selected,
      onClick = props.onClick;
  var rHalf = 6;
  var sourcePt = {
    x: -rHalf + sourcePosition.x,
    y: sourcePosition.y + rHalf
  };
  var targetPt = {
    x: -rHalf + targetPosition.x,
    y: targetPosition.y - rHalf
  };
  var padding = 21 - rHalf;
  var vTurn = 13;
  var polylinePoints = []; // TODO: refactor, THIS IS HELL OF A MESS

  if (targetPt.y < sourcePt.y) {
    if (targetPt.x > sourcePt.x) {
      var isWide = Math.abs(sourcePt.x - targetPt.x) > 20;
      polylinePoints = [[sourcePt.x, sourcePt.y], [sourcePt.x, sourcePt.y + padding], [targetPt.x + (isWide ? -12 : 12), sourcePt.y + padding], [targetPt.x + (isWide ? -12 : 12), targetPt.y - vTurn + 2], [targetPt.x, targetPt.y - vTurn + 2], [targetPt.x, targetPt.y]];
    } else {
      var nLength = sourceName.length < 10 ? sourceName.length * SYMBOL_WIDTH + 8 : 120;
      polylinePoints = [[sourcePt.x, sourcePt.y], [sourcePt.x, sourcePt.y + padding], [sourcePt.x + nLength, sourcePt.y + padding], [sourcePt.x + nLength, targetPt.y - vTurn + 2], [targetPt.x, targetPt.y - vTurn + 2], [targetPt.x, targetPt.y]];
    }
  } else {
    if (Math.abs(sourcePt.x - targetPt.x) < 5) {
      polylinePoints = [[sourcePt.x, sourcePt.y], [targetPt.x, targetPt.y]];
    } else {
      if (Math.abs(targetPt.y - sourcePt.y) > padding) {
        polylinePoints = [[sourcePt.x, sourcePt.y], [sourcePt.x, sourcePt.y + padding], [targetPt.x, sourcePt.y + padding], [targetPt.x, targetPt.y]];
      } else {
        polylinePoints = [[sourcePt.x, sourcePt.y], [sourcePt.x, sourcePt.y + padding], [targetPt.x - 12, sourcePt.y + padding], [targetPt.x - 12, targetPt.y - vTurn + 2], [targetPt.x, targetPt.y - vTurn + 2], [targetPt.x, targetPt.y]];
      }
    }
  }

  var iconSize = 8;
  var endPointConfig = {
    x: targetPt.x - 4,
    y: targetPt.y - iconSize
  };
  return React.createElement("g", {
    className: 'CodeCrumbEdge'
  }, React.createElement("polyline", {
    points: polylinePoints.join(', '),
    className: classNames('CodeCrumbEdge-flow', {
      'CodeCrumbEdge-flow-selected': selected
    }),
    onClick: onClick
  }), React.createElement("polyline", {
    points: polylinePoints.join(', '),
    className: 'EdgeMouseHandler',
    onClick: onClick
  }), React.createElement("rect", {
    x: sourcePt.x - 1.5,
    y: sourcePt.y,
    width: 3,
    height: 2,
    className: classNames('CodeCrumbEdge-flow-source', {
      'CodeCrumbEdge-flow-source-selected': selected
    })
  }), React.createElement(Arrow, {
    x: endPointConfig.x,
    y: endPointConfig.y,
    height: iconSize,
    width: iconSize,
    fill: selected ? '#754BC3' : '#717070'
  }));
}; // TODO: refactor duplication, clean up

export var ExternalEdge = function ExternalEdge(props) {
  var sourcePosition = props.sourcePosition,
      targetPosition = props.targetPosition,
      topBottom = props.topBottom,
      areaHeight = props.areaHeight,
      firstPart = props.firstPart,
      onClick = props.onClick,
      selected = props.selected;
  var rHalf = 6;
  var sourcePt = {
    x: -rHalf + sourcePosition.x,
    y: sourcePosition.y + rHalf
  };
  var targetPt = {
    x: -rHalf + targetPosition.x,
    y: targetPosition.y - rHalf
  };
  var padding = 21 - rHalf;
  var vTurn = 12;
  var points = firstPart ? [[sourcePt.x, sourcePt.y], [sourcePt.x, sourcePt.y + padding], [targetPt.x + (topBottom ? 0 : -12), sourcePt.y + padding], [targetPt.x + (topBottom ? 0 : -12), topBottom ? areaHeight : 0]] : topBottom ? [[targetPt.x - 12, topBottom ? areaHeight : 0], [targetPt.x - 12, targetPt.y - vTurn], [targetPt.x - 1, targetPt.y - vTurn], [targetPt.x - 1, targetPt.y]] : [[targetPt.x, topBottom ? areaHeight : 0], [targetPt.x, targetPt.y]];
  var iconSize = 8;
  return React.createElement("g", {
    className: 'CodeCrumbEdge'
  }, React.createElement("polyline", {
    points: points.join(', '),
    className: classNames('CodeCrumbEdge-flow', {
      'CodeCrumbEdge-flow-selected': selected
    }),
    onClick: onClick
  }), React.createElement("polyline", {
    points: points.join(', '),
    className: 'EdgeMouseHandler',
    onClick: onClick
  }), firstPart ? React.createElement("rect", {
    x: sourcePt.x - 1,
    y: sourcePt.y,
    width: 3,
    height: 2,
    className: classNames('CodeCrumbEdge-flow-source', {
      'CodeCrumbEdge-flow-source-selected': selected
    })
  }) : React.createElement(Arrow, {
    x: targetPt.x - 5,
    y: targetPt.y - iconSize,
    height: iconSize,
    width: iconSize,
    fill: selected ? '#754BC3' : '#717070'
  }));
};