import React, {Component} from 'react'
import classNames from 'classnames/bind'
import Button from 'components/utils/button'
import store from '../common/store'
import request from '../common/request'
import {dismiss_popover, alert_success} from '../actions/display'
import {store_messages} from '../actions/messages'

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

class NewGroupedMessage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      content: "",
    }
    this.send_message = this.send_message.bind(this)
  }

  send_message() {
    store.dispatch(dismiss_popover())
    this.props.unselect_users()
    request.post(`users/grouped_message`, {message: {content: this.state.content, user_ids: this.props.user_ids}})
    .then((messages) => store.dispatch(store_messages(messages)))
    .then(() => store.dispatch(alert_success("Votre message a bien été envoyé aux candidats sélectionnés.")))
  }

  render() {
    return (
      <div className={cx('new-mission')}>
        <div className={cx('new-mission__new-message')}>
          <textarea
            className="new-mission__new-message-input"
            placeholder="Message aux candidats sélectionnés"
            value={this.state.content}
            onChange={(event) => {
              let content = event.target.value
              this.setState({content})
            }}
            />
          <div className={cx('new-mission__new-message-button')}>
            <Button onClick={this.send_message}>
              Envoyer
            </Button>
          </div>
        </div>
      </div>
    )
  }
}

export default NewGroupedMessage