import React from 'react';
import {Group} from 'react-art';
import Circle from 'react-art/shapes/circle';
import MetricsPath from 'art/metrics/path';
import Utils from '../utils/DrawingUtils.js';

import { CURRENT } from './Constants.js';

const STANDING_OFFSET = CURRENT.DOT_DISTANCE / 2;

/**
 * Displays current flow along a path.
 */
const CurrentPath = (
    {
      current = 0,
      currentOffset,
      connectors,
      theme
    },
    context
  ) => {
  const circles = [],
        showCurrent = !(context && context.disableCurrent);
  if (showCurrent) {
    const [end1, end2] = connectors,
          d = Utils.diff(end1, end2),

          path = new MetricsPath()
            .moveTo(end1.x, end1.y)
            .lineTo(end2.x, end2.y),

          fiddleCurrent = current / 10, // FIXME no magic fiddles

          offset = (fiddleCurrent * currentOffset + STANDING_OFFSET) % CURRENT.DOT_DISTANCE,
          startPos = current >= 0
            ? offset
            : offset + CURRENT.DOT_DISTANCE;
    let key = 0;
    for (let position = startPos; position <= d.length(); position += CURRENT.DOT_DISTANCE) {
      circles.push(
        React.createElement(Circle, {
          key: key++,
          radius: CURRENT.RADIUS,
          fill: theme.COLORS.current,
          transform: path.point(position)
        })
      );
    }
  }
  return (
    <Group>
      {circles ? circles : null}
    </Group>
  );
};

CurrentPath.propTypes = {
  connectors: React.PropTypes.arrayOf(Utils.PropTypes.Vector).isRequired,
  current: React.PropTypes.number,
  currentOffset: React.PropTypes.number,
  theme: React.PropTypes.object.isRequired
};

CurrentPath.contextTypes = {
  disableCurrent: React.PropTypes.bool // can't set defaultContext so defaults to falsy
};

export default CurrentPath;

@@ -189,17 +189,16 @@
 ls.js';%0A
-%0A
 import %7B
@@ -1147,37 +1147,15 @@
     
-React.createElement(
+%3C
 Circle
-, %7B
 %0A   
@@ -1168,16 +1168,16 @@
  key
-: 
+=%7B
 key++
-,
+%7D
 %0A   
@@ -1189,18 +1189,18 @@
   radius
-: 
+=%7B
 CURRENT.
@@ -1205,17 +1205,17 @@
 T.RADIUS
-,
+%7D
 %0A       
@@ -1221,18 +1221,18 @@
     fill
-: 
+=%7B
 theme.CO
@@ -1243,17 +1243,17 @@
 .current
-,
+%7D
 %0A       
@@ -1264,18 +1264,18 @@
 ransform
-: 
+=%7B
 path.poi
@@ -1286,16 +1286,17 @@
 osition)
+%7D
 %0A       
@@ -1300,10 +1300,10 @@
     
-%7D)
+/%3E
 %0A   

Use <Circle/> instead of React.createElement