import React, { Component, PropTypes } from 'react';
import cx from 'classnames';
import styles from './Buttonbar.scss';

export default class Buttonbar extends Component {
  static propTypes = {
    onBan: PropTypes.func.isRequired,
    onControl: PropTypes.func.isRequired,
    onNext: PropTypes.func.isRequired,
    onTaste: PropTypes.func.isRequired,
    song: PropTypes.object.isRequired,
    playing: PropTypes.bool,
  }

  constructor(props) {
    super(props);
  }

  renderFavorite = (favorite, onClick) => {
    return (
      <a href="#" onClick={onClick} >
        <i className={cx('material-icons', { favorite })} > favorite </i>
      </a>
    );
  }

  renderPlay = (playing, onClick) => {
    const icon = playing ? 'pause' : 'play_arrow';
    return (
      <a href="#" onClick={onClick} >
        <i className="material-icons" > {icon} </i>
      </a>
    );
  }

  render() {
    const { song, playing } = this.props;

    return (
      <div className={styles.buttonBar}>
        <div className="tasteButtonGroup">
          {this.renderFavorite(song.favorite, this.props.onTaste)}
          <a href="#" onClick={this.props.onBan} >
            <i className="material-icons" > cancel </i>
          </a>
        </div>
        <div className="controlButtonGroup">
          {this.renderPlay(playing, this.props.onControl)}
          <a href="#" onClick={this.props.onNext} >
            <i className="material-icons" > skip_next </i>
          </a>
        </div>
      </div>
    );
  }
}

@@ -507,24 +507,69 @@
 Click) =%3E %7B%0A
+    const title = favorite ? '%E5%8F%96%E6%B6%88%E5%96%9C%E6%AC%A2' : '%E5%96%9C%E6%AC%A2';%0A%0A
     return (
@@ -596,32 +596,46 @@
 nClick=%7BonClick%7D
+ title=%7Btitle%7D
  %3E%0A        %3Ci cl
@@ -808,16 +808,58 @@
 arrow';%0A
+    const title = playing ? '%E6%9A%82%E5%81%9C' : '%E6%92%AD%E6%94%BE';%0A%0A
     retu
@@ -899,16 +899,29 @@
 nClick%7D 
+title=%7Btitle%7D
 %3E%0A      
@@ -1257,16 +1257,29 @@
 s.onBan%7D
+ title=%22%E4%B8%8D%E5%86%8D%E6%92%AD%E6%94%BE%22
  %3E%0A     
@@ -1512,16 +1512,28 @@
 .onNext%7D
+ title=%22%E4%B8%8B%E4%B8%80%E9%A6%96%22
  %3E%0A     

add title for buttons. Fixes #2