import React, {Component} from 'react'
import {MdSettings} from 'react-icons/lib/md'
import classNames from 'classnames/bind'

const cx = classNames.bind(require('../styles/more_button.scss'))

const MoreButton = (props) => (
  <div className={cx('more-button')}>
    <MdSettings />
    <div className={cx('more-button__dropdown')}>
      {[
        {onClick: props.start_edit, label: "Renommer"},
        {onClick: props.on_delete, label: "Supprimer"},
        {onClick: props.stop_recycling, label: "Ne plus utiliser ce champ candidat comme champ mission"},
        {onClick: props.show_associated_values, label: "Voir les valeurs associées"}
      ].map((option, index) => ({key: index, ...option}))
      .filter(({onClick}) => onClick)
      .map((option) => <Option {...option} />)}
    </div>
  </div>
)

class Option extends Component {
  constructor(props) {
    super(props)
    this.onClick = this.onClick.bind(this)
  }

  onClick(event) {
    event.stopPropagation()
    this.props.onClick(event)
  }

  render() {
    return (
      <div className={cx('more-button__option')} onClick={this.onClick}>
        {this.props.label}
      </div>
    )
  }
}

export default MoreButton