content: import React from 'react';
  import WindIcons from './../utils/WindIcons';
  import AppDispatcher from './../dispatcher/AppDispatcher';
  import constants from './../constants/consts';
  
  const TAG = 'MapLegend:';
  
  const LegendIcon = React.createClass({
    render() {
      return (
        <svg>
          <path
            d={this.props.path}
            stroke="black"
            fill="none"
            strokeWidth="1"
            x="0"
            y="0"
            transform="translate(40,10) scale(2) rotate(90)">
          </path>
        </svg>
      )
    }
  });
  
  const MapLegend = React.createClass({
  
    getInitialState() {
      return {
        highLightIndex: -1
      }
    },
  
    componentWillMount() {
  
      this._dispatcherToken = AppDispatcher.register((action) => {
  
        if (action.actionType == constants.MAP_LEGEND_HIGHLIGHT_ON) {
          this.setState({
            highLightIndex: WindIcons.speedToIconIndex(action.speed)
          });
  
        }
        else if (action.actionType == constants.MAP_LEGEND_HIGHLIGHT_OFF) {
          this.setState({highLightIndex: -1});
        }
  
      });
  
    },
  
    componentWillUnmount() {
      AppDispatcher.unregister(this._dispatcherToken);
    },
  
    render() {
  
      const arrowsWithLabels = WindIcons.iconsWithLimits();
  
      let index = -1;
      const legendIcons = arrowsWithLabels.map((arrow) => {
        index += 1;
        let highlight;
        if (this.state && this.state.highLightIndex == index) {
          highlight = "highlighted";
        }
        else {
          highlight = "";
        }
  
        return (
          <tr id={index} key={index} className={highlight}>
            <td>
              <LegendIcon path={arrow.path}/>
            </td>
            <td className="arrow-label">
              {arrow.labelLow} - {arrow.labelHigh}
            </td>
          </tr>
        );
      });
  
      return (
        <div>
          <div id="map-view"></div>
          <div id="map-legend">
            <table>
              <tbody>
              {legendIcons}
              </tbody>
            </table>
            <table id="map-legend-info">
              <tbody>
              <tr>
                <td>* unit: m/s</td>
              </tr>
              </tbody>
            </table>
          </div>
  
        </div>
      )
    }
  
  });
  
  export default MapLegend;