import React, { PropTypes } from 'react';
import { List } from 'immutable';
import Polyline from './Polyline';
import Marker from './Marker';

class TaskPlot extends React.Component {

  shouldComponentUpdate(nextProps) {
    return (this.props.map !== nextProps.map) ||
      (this.props.googlemaps !== nextProps.googlemaps) ||
      (this.props.task !== nextProps.task);
  }

  render() {
    const { task, googlemaps, map } = this.props;
    const positions = task.map(waypoint => waypoint.get('position'));

    let markers = positions.map((pos, index) =>
      <Marker googlemaps={googlemaps} map={map} position={pos} key={index} />)
      .toArray();

    return (
      <span>
        <Polyline googlemaps={googlemaps} map={map} path={positions} />

        {markers}
      </span>
    );
  }
}

TaskPlot.propTypes = {
  task: PropTypes.instanceOf(List),
  map: PropTypes.object,
  googlemaps: PropTypes.object
};

export default TaskPlot;

@@ -134,16 +134,50 @@
 Marker';
+%0Aimport * as icons from './icons';
 %0A%0Aclass 
@@ -537,16 +537,61 @@
 tion'));
+%0A    const lastIndex = positions.count() - 1;
 %0A%0A    le
@@ -631,23 +631,304 @@
 ndex) =%3E
+ %7B
 %0A      
+let markerLabel;%0A      switch (index) %7B%0A        case lastIndex:%0A          markerLabel = icons.UNICODE_CHEQUERED_FLAG;%0A          break;%0A        case 0:%0A          markerLabel = 'S';%0A          break;%0A        default:%0A          markerLabel = index.toString();%0A      %7D%0A%0A      return (
 %3CMarker 
@@ -975,16 +975,36 @@
 on=%7Bpos%7D
+ label=%7BmarkerLabel%7D
  key=%7Bin
@@ -1011,23 +1011,24 @@
 dex%7D /%3E)
+;
 %0A    
-  
+%7D)
 .toArray

Add labels to task markers.