import React, { Component } from 'react';

import { FormGroup, FormControl, Button } from 'react-bootstrap';

class CategoriesTooltip extends Component {

  onButtonClick = (category) => {

    if (typeof this.props.onCategoryClick === 'function') {

      this.props.onCategoryClick(category)

    }

  }

  render() {

    return (

      <div className="categories-tooltip">

        <FormGroup className="buttons">

        {this.props.categories.map((category) =>

          <Button key={ category.name } bsStyle="primary" style={{ backgroundColor: category.color }}

            onClick={this.onButtonClick.bind(this, category)}>{ category.name }</Button>

        )}

        </FormGroup>

        <FormGroup>

          <FormControl />

        </FormGroup>

      </div>

    );

  }

}

export default CategoriesTooltip