import React from 'react';
import classNames from 'classnames';
import './index.less';
export var CodeCrumbName = function CodeCrumbName(props) {
  // onMouseOver maybe use onMouseOver to show crumb details in popover
  var position = props.position,
      loc = props.loc,
      name = props.name,
      singleCrumb = props.singleCrumb,
      cover = props.cover,
      flow = props.flow,
      flowStep = props.flowStep,
      original = props.original,
      selected = props.selected,
      onMouseOver = props.onMouseOver,
      onClick = props.onClick;
  var textPoint = position;
  var symbolWidth = 6;
  var locWidth = loc.length ? loc.length * symbolWidth + 3 : 0; // TODO: refactor render

  return React.createElement("g", {
    className: 'CodeCrumbNode'
  }, cover && React.createElement("rect", {
    x: textPoint.x - 3,
    y: position.y - 9,
    width: locWidth + 4,
    height: 18,
    className: 'NodeText-cover'
  }) || null, !flow && locWidth && React.createElement(React.Fragment, null, React.createElement("rect", {
    x: textPoint.x + (singleCrumb ? 2 : 0),
    y: textPoint.y - 6,
    width: locWidth,
    height: 12,
    strokeDasharray: "2",
    className: 'CodeCrumbName-rect'
  }), React.createElement("text", {
    x: textPoint.x + 2.5 + (singleCrumb ? 2 : 0),
    y: textPoint.y + 3,
    onClick: onClick,
    className: 'CodeCrumbName-loc'
  }, loc)) || null, flow && React.createElement(React.Fragment, null, React.createElement("rect", {
    x: textPoint.x - 13,
    y: textPoint.y - 7,
    width: 13,
    height: 13,
    className: selected ? 'CodeCrumbName-flow-step-selected' : 'CodeCrumbName-flow-step'
  }), React.createElement("text", {
    x: textPoint.x - 10.5,
    y: textPoint.y + 3.5,
    onClick: onClick,
    className: 'CodeCrumbName-flow'
  }, flowStep !== 0 ? flowStep : /#0/.test(original) ? 0 : '*')) || null, name && React.createElement(React.Fragment, null, cover && React.createElement("rect", {
    x: textPoint.x + 2 + (!flow ? locWidth : 0),
    y: position.y - 6,
    width: name.length * 7.5,
    height: 13,
    className: 'NodeText-cover'
  }) || null, React.createElement("text", {
    x: textPoint.x + 3 + (!flow ? locWidth + (singleCrumb ? 2 : 0) : 0) - 1,
    y: textPoint.y + 4,
    onClick: onClick,
    className: classNames('CodeCrumbName-text', {
      'CodeCrumbName-text-selected': selected
    })
  }, !locWidth && !flow ? React.createElement(React.Fragment, null, "\u25D6", name) : name)) || null);
};