import React, { useContext } from 'react'
import Message from '../Message';
import "./ChatMain.css";
import { UserContext } from '../../contexts/UserProvider';

const ChatMain = React.forwardRef(({
  messages,
}, ref) => {

  const { user } = useContext(UserContext);

  const timeToReadable = (timestamp) => {
    var d = new Date(timestamp);
    return d.toLocaleTimeString();
    // return timestamp;
  }

  const isReceived = (message) => {
    return user && message.sender_id != user.id;
  };

  return (
    <div className='chat_main' ref={ref}>
      {

        messages.map((message, idx) => (
          <Message
            key={idx}
            message={message.content}
            time={timeToReadable(message.timestamp)}
            isReceived={isReceived(message)}
          />
        ))
      }
    </div>
  )
})

export default ChatMain