import React, {useState, useEffect, useMemo} from 'react';
import {Button, Stack} from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
    const [enregistre, setEnregistre] = useState(false);
    const [text,setText] = useState("Les données ne sont pas enregistrées");
    const [chute,setChute] = useState();

    let ws = useMemo(() => {
        if(enregistre)
         return new WebSocket('ws://127.0.0.1:8080')
    },[enregistre]);

    // Équivalent à componentDidMount plus componentDidUpdate :
    useEffect(() => {
        if (enregistre) {
            setText("Enregistrement en cours")
            ws.onmessage = (event) => {
               console.log(JSON.parse(event.data))
            }
        } else {
            setText("Les données ne sont pas enregistrées")
        }
    },[enregistre]);


    const handleClick= ()=> {
        if(!enregistre)
            setEnregistre(true);
        else {
            setEnregistre(false);
            ws.close();
        }
    }

    return (
        <>
        <head>
            <title>controlleur capteur</title>
            <script src="https://unpkg.com/react/umd/react.production.min.js" crossOrigin/>
        </head>
        <div>
            <h1>Lancer l'enregistrement des données des capteurs</h1>

            <Stack gap={2} className="col-md-5 mx-auto">
                <p>{text}</p>
                <Button
                    variant="outline-primary"
                    onClick={handleClick}
                >enregistrement
                </Button>{' '}
            </Stack>
        </div>
        </>
    );
}

export default App;