import { useEffect, useState } from 'react';
import './App.css'
import Bouton from "./interface/Bouton";
import CatHistory from "./interface/CatHistory";
import Chats from "./interface/Chats";
import useWebSocket from 'react-use-websocket';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {

  const [status, setStatus] = useState({})
  const { sendMessage, lastMessage, readyState } = useWebSocket('ws://localhost:3001');

  useEffect(() => {
    if (lastMessage !== null) setStatus(JSON.parse(lastMessage.data))
  }, [lastMessage]);

  return (
    <div className="App">
        <div>
            <h1>La chatière de Pina !</h1>
        </div>
        <Bouton statusLocked={status.locked} sendMessage={sendMessage} />
        <Chats statusCatsInside={status.catsInside} />
        <CatHistory/>
        <ToastContainer />
    </div>
  )
}

export default App