import React, { Component } from 'react';

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

class CategoriesTooltip extends Component {

  state = {

    activeCategory: null,

    showCommentControl: false

  }

  componentDidUpdate = () => {

    if (this.state.showCommentControl) {

      this.commentControl.focus();

    }

  }

  isCategoryActive = (category) => {

    return this.state.activeCategory && this.state.activeCategory.key === category.key

  }

  onButtonClick = (category) => {

    if (category.hasOwnProperty('hasComment') && category.hasComment === true) {

      this.setState({

        activeCategory: this.state.activeCategory ? null : category,

        showCommentControl: !this.state.showCommentControl

      })

    } else {

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

        this.props.onCategoryClick(category)

      }

    }

  }

  onSubmit = (e) => {

    e.preventDefault();

    if (this.state.showCommentControl) {

      const comment = this.commentControl.value;

      const { activeCategory } = this.state;

      Object.assign(activeCategory, { comment: comment });

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

        this.props.onCategoryClick(activeCategory)

      }

    }

  }

  render() {

    return (

      <div className="categories-tooltip">

        <form onSubmit={ this.onSubmit }>

          <FormGroup className="buttons">

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

            <Button

              key={ category.name }

              bsStyle="primary"

              style={{ backgroundColor: category.color }}

              active={ this.isCategoryActive(category)  }

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

          )}

          </FormGroup>

          {this.state.showCommentControl &&

          <FormGroup>

            <FormControl inputRef={(ref) => { this.commentControl = ref; }} />

          </FormGroup>}

        </form>

      </div>

    );

  }

}

export default CategoriesTooltip