const Conversation = (props) => {
  // TODO: Split this code into multiple functions
  let lastAuthor;
  let lastMessageCreationTime;
  const dispatch = useDispatch();
  const [message, setMessage] = useState("");
  const messagesEnd = useRef();
  useEffect(() => {
    messagesEnd.current.scrollIntoView();
  }, []);

  const messagesList = props.messages.map((message) => {
    if (typeof lastMessageCreationTime === "undefined") {
      lastMessageCreationTime = message.createdAt;
    }

    let formattedMessage = (
      <Message
        author={{ name: message.author.name, src: message.author.src }}
        message={message.content}
        sentAt={message.createdAt}
        isFirstFromAuthor={isFirstFromAuthor(lastAuthor, message.author.name)}
        self={message.self}
      />
    );
    lastMessageCreationTime = message.createdAt;
    lastAuthor = message.author.name;
    return formattedMessage;
  });

  const handleKeyPress = async (event) => {
    if (event.key === "Enter" && event.shiftKey) {
      console.log("Shift + enter pressed!");
      return null;
    } else if (event.key === "Enter") {
      event.preventDefault();
      setMessage(message.trim());
      if (message !== "") {
        setMessage("");
        event.target.value = "";
        dispatch(createMessage(message));
      }
    }
  };
  return (
    <div className="conversation">
      <div className="messages">
        {messagesList}
        <div ref={messagesEnd}></div>
      </div>
      <div className="conversation-input">
        <TextareaAutosize
          placeholder="Écrivez un message..."
          onChange={(e) => setMessage(e.target.value)}
          onKeyPress={handleKeyPress}
        />
      </div>
    </div>
  );
};

const isFirstFromAuthor = (lastAuthor, currentAuthorName) => {
  if (!lastAuthor) {
    return true;
  }
  if (currentAuthorName !== lastAuthor) {
    return true;
  }
  return false;
};

export default Conversation;