import React from "react"

export default class MessageList extends React.Component {
  constructor() {
    super()
  }

  render() {

      var currentDate = new Date()
      var currentMonth = currentDate.getMonth()
      var timeline=""

      var mssgTypeList = {
        "this_month" : [],
        "last_month" : [],
        "previous_month" : []
       }

       this.props.messages.forEach(function(message,index){
          var date = message.date.substring(0, 10)
          var time = message.date.slice(12)

          var messageDate = new Date(date)
          var messageMonth = messageDate.getMonth()

          if(currentMonth == messageMonth) {
            timeline == 'this_month'
          } else if(currentMonth == messageMonth + 1){
            timeline = 'last_month'
          } else if(currentMonth == messageMonth + 2) {
            timeline = 'previous_month'
          }

          mssgTypeList[timeline].push(message);

       });

       const ThisMonthMessageList = mssgTypeList["this_month"].map((message) => {
          var date = message.date.substring(0, 10);
          var time = message.date.slice(12);

            return (
                <li className="list-group-item" key={message.id}>
                  Date: {date} <br></br>
                  Time: {time} <br></br>
                  Body: {message.body}
                </li>
            )
       });

       const LastMonthMessageList = mssgTypeList["last_month"].map((message) => {
          var date = message.date.substring(0, 10);
          var time = message.date.slice(12);

            return (
                <li className="list-group-item" key={message.id}>
                  Date: {date} <br></br>
                  Time: {time} <br></br>
                  Body: {message.body}
                </li>
            )
       })

      const PreviousMonthMessageList = mssgTypeList["previous_month"].map((message) => {
          var date = message.date.substring(0, 10);
          var time = message.date.slice(12);

            return (
                <li className="list-group-item" key={message.id}>
                  Date: {date} <br></br>
                  Time: {time} <br></br>
                  Body: {message.body}
                </li>
            )
      })

      return (
          <div id="messageList">

            <h2>This Month</h2>
            <ul className="list-group this-month-group">
              {ThisMonthMessageList}
            </ul>

            <h2>Last Month</h2>
            <ul className="list-group last-month-group">
              {LastMonthMessageList}
            </ul>

            <h2>Previous Month</h2>
            <ul className="list-group previous-month-group">
              {PreviousMonthMessageList}
            </ul>
          </div>
         )
       }