import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './index.css'

import Home from './pages/Home'
import ChannelPage from './pages/ChannelPage'
import UserPage from './pages/UserPage'
import Login from './pages/Login'
import Register from './pages/Register'
import CreateChannel from './pages/CreateChannel'
import ChannelsPage from './pages/ChannelsPage'

const socket = new WebSocket("/api/ws");

setInterval(() => {
  socket.send(JSON.stringify({ type: "ping" }));
}, 30 * 1000);

socket.addEventListener('message', function (event) {
  const data = JSON.parse(event.data);
  console.log(data);
});

createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home socket={socket} />} />
      <Route path="/c/:name" element={<ChannelPage socket={socket} />} />
      <Route path="/u/:username" element={<UserPage socket={socket} />} />
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route path="/create-channel" element={<CreateChannel />} />
      <Route path="/channels" element={<ChannelsPage socket={socket} />} />
    </Routes>
  </BrowserRouter>
)