content: import React from 'react';
  import DjangoCSRFToken from './DjangoCSRFToken';
  
  export default class TweetModal extends React.Component {
    constructor(props) {
      super(props);
  
      var usersInvolved = [];
      usersInvolved.push('@' + props.tweet.user.screen_name);
  
      usersInvolved = props.tweet.user_mentions.reduce(function(a, b) {
        return a.concat(b.screen_name);
      }, usersInvolved);
  
      usersInvolved = usersInvolved.join(' @') + ' ';
  
      this.state = {
        tweet: props.tweet,
        modalName: props.modalName,
        reply: usersInvolved,
        inReplyTo: props.tweet.id,
      };
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.tweetReply = this.tweetReply.bind(this);
    }
  
    handleChange(event) {
      this.setState({reply: event.target.value});
    }
  
    handleSubmit(event) {
      this.tweetReply();
    }
  
    tweetReply() {
      const url = Django.url('timeline-user', {user_username: Django.user.username});
      const csrftoken = Cookies.get('csrftoken');
      $.ajaxSetup({
        beforeSend: function(xhr, settings) {
          xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
      });
      $.ajax({
        url: url,
        method: 'POST',
        data: {
          reply: this.state.reply,
          inReplyTo: this.state.inReplyTo
        },
        success: function(data) {
        }.bind(this),
        error: function(data) {
        }.bind(this),
      })
    }
  
    render() {
      const tweet = this.state.tweet;
      const modalName = this.state.modalName;
      return (
        <div className="modal fade" id={modalName} role="dialog" data-backdrop="false">
          <div className="modal-dialog" role="document">
            <div className="modal-content">
              <div className="modal-header">
                <div className="modal-title">
                  Reply @{tweet.user.screen_name}
                </div>
              </div>
  
              <div className="modal-body">
                <p className="lead">
                  {tweet.text}
                </p>
  
                <form onSubmit={this.handleSubmit}>
                  <DjangoCSRFToken />
                  <div className="form-group">
                    <label htmlFor="">Reply</label>
                    <textarea className="form-control" value={this.state.reply} rows="3" onChange={this.handleChange} maxLength="140" style={{resize: 'none'}}>
                    </textarea>
                  </div>
  
                  <div className="d-flex justify-content-end w-100">
                    <p className="mr-auto" id={'word-count-' + tweet.id_str}>{140 - this.state.reply.length} characters remaining</p>
                    <button className="btn btn-outline-info" type="submit" >Reply</button>
                  </div>
                </form>
              </div>
  
              <div className="modal-footer">
                <button className="btn btn-outline-secondary" data-dismiss="modal" type="button">Close</button>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  