import React from 'react';
import classNames from 'classnames';
import { LAYOUT_CONFIG, DepEdgeGroups } from '../constants';
import Arrow from '../Icons/Arrow';
import './index.less';
var TOP_LEFT = DepEdgeGroups.TOP_LEFT,
    TOP_RIGHT = DepEdgeGroups.TOP_RIGHT;
var V_SPACE = LAYOUT_CONFIG.spacing + LAYOUT_CONFIG.nodeSizeX;
var PADDING = 30;
var HALF_PADDING = PADDING / 2;
var crossShift = 2; // Arrow can go from top ot bottom of file icon

var getSourcePt = function getSourcePt(groupName, sourcePosition, targetPt) {
  var topDirection = sourcePosition.y !== targetPt.y ? [TOP_LEFT, TOP_RIGHT].includes(groupName) : true;
  return {
    x: sourcePosition.x + 11,
    y: topDirection ? sourcePosition.y + 6 : sourcePosition.y - 6
  };
};

var getSourceDotLinePoints = function getSourceDotLinePoints(groupName, sourcePt, sourcePosition, targetPosition) {
  var shiftY = sourcePosition.y !== targetPosition.y ? [TOP_LEFT, TOP_RIGHT].includes(groupName) ? 1 : -1 : 1;
  return [[sourcePt.x - 2, sourcePt.y - shiftY], [sourcePt.x, sourcePt.y + shiftY], [sourcePt.x + 2, sourcePt.y - shiftY]];
};

var getConnectionLine = function getConnectionLine(groupName, targetPosition, sourcePosition, sourcePt) {
  var direction = [TOP_LEFT, TOP_RIGHT].includes(groupName) ? 1 : -1;
  var vPadding = (V_SPACE / 2 - crossShift) * direction;
  var siblingNodesDistance = 40;

  if (Math.abs(sourcePt.y - targetPosition.y) <= siblingNodesDistance) {
    return [[sourcePt.x, sourcePt.y], [sourcePt.x, targetPosition.y - vPadding], [targetPosition.x + 2, targetPosition.y - vPadding], [targetPosition.x + 2, targetPosition.y - 5 * direction]];
  }

  var workAroundXShift = 7;
  return [[sourcePt.x, sourcePt.y], [sourcePt.x, sourcePt.y + vPadding], [targetPosition.x - workAroundXShift, sourcePt.y + vPadding], [targetPosition.x - workAroundXShift, targetPosition.y - vPadding], [targetPosition.x + 2, targetPosition.y - vPadding], [targetPosition.x + 2, targetPosition.y - 5 * direction]];
};

var getConnectionLineToFirstSource = function getConnectionLineToFirstSource(groupName, targetPosition, firstSourcePosition, sourcePosition, sourcePt) {
  var directionY = [TOP_LEFT, TOP_RIGHT].includes(groupName) ? 1 : -1;
  var vPadding = V_SPACE / 2 * directionY;
  return [[sourcePt.x, sourcePt.y], [sourcePt.x, sourcePosition.y + vPadding], [firstSourcePosition.x + 8 + -HALF_PADDING, sourcePosition.y + vPadding], [firstSourcePosition.x + 8 + -HALF_PADDING, targetPosition.y - vPadding + crossShift * directionY], [targetPosition.x + 2, targetPosition.y - vPadding + crossShift * directionY], [targetPosition.x + 2, targetPosition.y - 5 * directionY]];
};

export var DependenciesEdge = function DependenciesEdge(props) {
  var groupName = props.groupName,
      targetPosition = props.targetPosition,
      sourcePosition = props.sourcePosition,
      firstSourcePosition = props.firstSourcePosition,
      selected = props.selected,
      anyEdgeSelected = props.anyEdgeSelected,
      onClick = props.onClick;
  var sourcePt = getSourcePt(groupName, sourcePosition, targetPosition);
  var sourceDotLinePoints = getSourceDotLinePoints(groupName, sourcePt, sourcePosition, targetPosition);
  var connectionLinePoints = !firstSourcePosition ? getConnectionLine(groupName, targetPosition, sourcePosition, sourcePt) : getConnectionLineToFirstSource(groupName, targetPosition, firstSourcePosition, sourcePosition, sourcePt);

  if (!connectionLinePoints) {
    return null;
  }

  return React.createElement(React.Fragment, null, React.createElement("polyline", {
    points: sourceDotLinePoints.join(', '),
    className: classNames('DependenciesEdge', {
      Animation: !anyEdgeSelected,
      'DependenciesEdge-selected': selected
    })
  }), React.createElement("polyline", {
    points: connectionLinePoints.join(', '),
    className: classNames('DependenciesEdge', {
      Animation: !anyEdgeSelected,
      'DependenciesEdge-selected': selected
    })
  }), React.createElement("polyline", {
    onClick: onClick,
    points: connectionLinePoints.join(', '),
    className: 'EdgeMouseHandler'
  }));
};
export var DependenciesArrow = function DependenciesArrow(_ref) {
  var targetPosition = _ref.targetPosition,
      groupName = _ref.groupName,
      selected = _ref.selected;
  var directionTop = [TOP_LEFT, TOP_RIGHT].includes(groupName);
  var endPointConfig = {
    x: targetPosition.x - 1,
    y: targetPosition.y + (directionTop ? -11 : 4)
  };
  var iconSize = 7;
  return React.createElement(Arrow, {
    x: endPointConfig.x,
    y: endPointConfig.y,
    height: iconSize,
    width: iconSize,
    isUp: !directionTop,
    fill: selected ? '#754BC3' : '#1890ff'
  });
};