import { useState, useEffect } from "react";
import { Routes, Route } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";

import io from "socket.io-client"
import { socket } from './socket';
import { ConnectionState } from './ConnectionState';
import { ConnectionManager } from './ConnectionManager';

import Header from './layout/header';
import Footer from './layout/footer';
import Create from './view/Create';
import Poll from './view/Poll';
import Join from './view/Join';
import Home from './view/Home';

function App() {

  const [data, setData] = useState();
  const [poll, setPoll] = useState();
  const [user, setUser] = useState();
  const [isConnected, setIsConnected] = useState(socket.connected);
  const navigate = useNavigate();

  useEffect(() => {
    function onConnect() {
      console.log('APP onConnect')
      setIsConnected(true);
    }
    function onDisconnect() {
      console.log('APP onDisconnect')
      setIsConnected(false);
    }
    function onCreate(data) {
      console.log('APP onCreate')
      navigate(`/poll/${data}/join`)
    }
    function onRegister(data) {
      console.log('APP onRegister data: ', data)
      setUser(data.user)
      localStorage.setItem(data.poll, data.token)
      navigate(`/poll/${data.poll}`)
    }
    function onPoll(data) {
      console.log('APP onPoll data: ', data)
      setPoll(data)
    }

    socket.on('connect', onConnect);
    socket.on('disconnect', onDisconnect);
    socket.on('create', onCreate);
    socket.on('register', onRegister);
    socket.on('poll', onPoll);

    return () => {
      socket.off('connect', onConnect);
      socket.off('disconnect', onDisconnect);
      socket.off('create', onCreate);
      socket.off('register', onRegister);
      socket.off('poll', onPoll);
    };
  }, []);

  return (
    <div className="min-h-screen place-content-center">
      <Header />
      <div className="mx-4">
        <div className="max-w-md mt-8 mx-auto mr-2rounded-xl overflow-hidden md:max-w-2xl bg-black bg-opacity-50 shadow-lg py-6 px-6">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/create" element={<Create socket={socket} io={io} />} />
            <Route path="/poll/:id" element={<Poll socket={socket} io={io} user={user} poll={poll} />} />
            <Route path="/poll/:id/join" element={<Join socket={socket} />} />
          </Routes>
        </div>
      </div>
      {/* <ConnectionState isConnected={isConnected} /> */}
      {/* <ConnectionManager /> */}
      <Footer />
    </div>
  )
}

export default App;