import { useState } from 'react';
import { Client } from 'paho-mqtt';


const ConnectedPage = () => {
  const StateMessages = [
    "Clique no botão para conectar",
    "Conectando...",
    "Conectado",
    "Erro na conexão",
  ];

  const [connected, setConnected] = useState(false);
  const [client, setClient] = useState(null);
  const [state, setState] = useState(0)

  const handleClick = () => {
    const options = {
      clientId: 'aaaaa',
      username: 'test',
      password: '31415926',
      clean: true,
      reconnectPeriod: 1000,
      connectTimeout: 30 * 1000,
      host: 'fwmari.net',
      port: 8883,
    };

    const _client = new Client(`ws://${options.host}:${options.port}/mqtt`, options.clientId);

    _client.connect({
      onSuccess: () => {
        console.log("Conectado");
        setConnected(true);
        setState(2);
      },
      onFailure: (err) => {
        console.log(`Erro ao conectar ${err}`);
        setState(3);
      },
    });

    setClient(_client);
    setState(1);
  }

  return (
    <div>
      <button onClick={handleClick}>
        Conectar ao servidor MQTT
      </button>

      <p>Status: {StateMessages[state]}</p>

      {connected && (
        <div>
          {/* O resto da sua página vai aqui */}
          <p>Conectado ao servidor MQTT! Agora você pode ver o resto da página.</p>
        </div>
      )}
    </div>
  );
}

export default ConnectedPage;