import React, { useState, useEffect } from "react";
import TextareaAutosize from "react-textarea-autosize";

import "./App.css";
import "font-awesome/css/font-awesome.css";

function App() {
  // array/lista de mensagens do arquivo do chat
  // variável e método de atualização
  const [chatMsgs, setChatMsgs] = useState([
    { msg: "Olá, em que posso ajudar?", className: "chatbox-bot" }
  ]);

  // mensagem que está sendo digitada neste momento
  // variável e método de atualização
  const [msg, setMsg] = useState("");

  // função responsável por adicionar uma nova mensagem
  // no array/lista de mensagens do arquivo do chat
  function sendMsg(event) {
    event.preventDefault();

    // boa validação...
    if (msg === "") {
      alert("Escreva Algo");
      return;
    }

    // adicionando uma nova mensagem com a classe "chatbox-user"
    setChatMsgs([...chatMsgs, { msg, className: "chatbox-user" }]);

    // limpando o campo de mensagem digitada
    setMsg("");
  }

  // sempre que nova mensagem entrar (ou sair) do array de mensagens
  // a barra de rolagem do chat será atualizada...
  useEffect(() => {
    const rolar = document.getElementById("chatbox-scroll");
    if (!!rolar) rolar.scrollTop = rolar.scrollHeight;
  }, [chatMsgs]);

  // no meio do JSX abaixo existe o bloco em que pegamos
  // mensagem por mensagem do array/lista de mensagens
  // e renderizamos em tela com uma DIV e também sua
  // respectiva classe
  return (
    <div>
      <div className="chatbox">
        <div className="chatbox-title">
          <span>Chat Soluções Web</span>
        </div>
        <div id="chatbox-scroll" className="chatbox-chat">
          {chatMsgs.map((item, k) => (
            <div key={k} className={item.className}>
              <span>{item.msg}</span>
            </div>
          ))}
        </div>
        <div className="chatbox-send">
          <TextareaAutosize
            className="chatbox-input"
            value={msg}
            onChange={event => setMsg(event.target.value)}
          />
          <i className={`fa fa-lg fa-paper-plane`} onClick={sendMsg} />
        </div>
      </div>
    </div>
  );
}

export default App;