import { makeStyles } from "@material-ui/core/styles";
import { Paper } from "@material-ui/core";
import SendMessage from "./SendMessage";
import MessageLeft from './Messages/MessageLeft'
import MessageRight from './Messages/MessagesRight'

import { chats } from "./chats";

const useStyles = makeStyles({   
    container: {
      width: "100%",
      height: "100%",
      maxWidth: "100%",
      maxHeight: "100%",
      display: "flex",
      alignItems: "center",
      alignContent:"center",
      flexDirection: "column",
      position: "relative",
      overflowY: "scroll",
      paddingTop: 60,
      paddingBottom:60
    },
    messagesBody: {
      width: "40%",
      height: "80%",
    },      
});

const timestamp = new Date(2022, 3, 8).toLocaleString("en-US", {
    year:'numeric',
    month: 'short',
    day: 'numeric'
  });

const ChatBar = () => {
  const classes = useStyles();
  return (
      <div className={classes.container}>
        <div className={classes.messagesBody}>
        {chats.map(({message,avatarUrl,name,lastName}:any,i) => {
          if (i % 2 == 0) {
            return (
            <MessageLeft
            message={message}
            timestamp={timestamp}
            avatarUrl={avatarUrl}
            name={name}
            lastName={lastName}
          />)
          } else {
            return (
            <MessageRight
            message={message}
            timestamp={timestamp}
            avatarUrl={avatarUrl}
            name={name}
            lastName={lastName}
          />)}})}
        </div>
        <SendMessage />
      </div>
  );
}

export default ChatBar