import React from 'react'
import MessageEntryForm from './MessageEntryForm'
const Messages = props => {
  const { title, namespace, messages, user, submitMessage } = props
  return (
    <div className="bg-secondary d-flex flex-column flex-grow-1 px-2 pb-4">
      {/*Main Section Header*/}
      <div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
        <h4 className="mr-auto ml-3">
          {title} {namespace}
        </h4>
      </div>
      {/*Main Section Content*/}
      <div className="d-flex flex-column border border-secondary flex-grow-1">
        <div className="bg-dark flex-grow-1 p-2 text-light">
          {messages
            .filter(
              m =>
                (m.to[0] === '#' && m.to === namespace) ||
                (m.to[0] !== '#' && m.from === namespace) ||
                (m.from === user.socketId && m.to === namespace)
            )
            .map(m => (
              <div className="row d-flex justify-content-between" key={m.id}>
                <div className="col">{m.date}</div>
                <div className="col">{m.nick}</div>
                <div>{m.text}</div>
              </div>
            ))}
        </div>
        <MessageEntryForm submitMessage={submitMessage} user={user} />
      </div>
    </div>
  )
}

export default Messages