import React, { useState } from "react";
import "./style.css";
import ChatBox from "./ChatBox.js";
import FeedbackForm from "./FeedbackForm.js";

const ChatPage = () => {
  const [needForm, setNeedForm] = useState(false);
  const [messages, setMessages] = useState([]);

  function updateNeedForm(value) {
    setNeedForm(value);
  }
  function updateMessages(msg) {
    setMessages((prevMessages) => [msg, ...prevMessages]);
  }
  return (
    <div>
      <ChatBox props={{ updateNeedForm, messages, updateMessages }} />
  { needForm && <FeedbackForm props={{ updateNeedForm, messages }} /> }
    </div>
  );
};

export default ChatPage;