content: import React from 'react';
  import { ListGroupItem, ButtonToolbar, Button, Glyphicon, Grid, Col, Modal } from 'react-bootstrap';
  
  export default class Message extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              hover: false,
              showModal: false,
              isPalindrome: false
          }
          this.handleCheckPalindrome = this.handleCheckPalindrome.bind(this);
          this.handleDelete = this.handleDelete.bind(this);
          this.showRemove = this.showRemove.bind(this);
          this.hideRemove = this.hideRemove.bind(this);
          this.hideModal = this.hideModal.bind(this);
      }
  
      handleCheckPalindrome() {
          return fetch(`/messages/${this.props._id}`)
              .then( (res) => res.json())
              .then( (message) => {
                  this.setState({isPalindrome: message.isPalindrome})
              })
              .then( () => {
                  this.setState({showModal: true})
              })
              .catch(error => {
                  console.log(`Error getting message by id: ${error}`);
          });
      }
  
      handleDelete() {
          return fetch(`/messages/${this.props._id}`, {
                  method: 'DELETE'
              })
              .then( (res) => res.json())
              .then( (message) => {
                  console.log(JSON.stringify(message));
              })
              .catch( (error) => {
                  console.log(`Error deleting message by id: ${error}`);
              })
      }
  
      showRemove() {
          this.setState({hover: true})
      }
      hideRemove() {
          this.setState({hover:false})
      }
  
      hideModal(){
          this.setState({showModal: false})
      }
  
      render() {
          return (
              <ListGroupItem className="message"
                  onMouseEnter={ this.showRemove}
                  onMouseLeave={this.hideRemove}
                  >
                      <Grid className="no-gutter" style={{width:'100%'}}>
                          <Col md={11}
                              style={{cursor: 'pointer'}}
                              onClick={ this.handleCheckPalindrome }
                          >
                          {this.props.text}
                          </Col>
                          <Col md={1}>
                          <Glyphicon
                              className="remove"
                              glyph="glyphicon glyphicon-remove"
                              onClick={this.handleDelete}
                              style={{cursor: 'pointer', opacity: `${this.state.hover ? 1 : 0}` }}
                          />
                          </Col>
                      </Grid>
                      <Modal show={this.state.showModal} onHide={this.hideModal}>
                          <Modal.Header closeButton>
                              <Modal.Title> Details </Modal.Title>
                          </Modal.Header>
                          <Modal.Body>
                              <h4> Id </h4>
                              {this.props._id}
                              <h4> Created Date </h4>
                              {this.props.createdAt}
                              <h4> Is it a palindrome? </h4>
                              <p>Holy guacamole {this.state.isPalindrome ? 'yes!' : ' no!'}</p>
                          </Modal.Body>
                      </Modal>
              </ListGroupItem>
          );
      }
  }
  