import { HashRouter, Routes, Route, useParams, useLocation } from 'react-router-dom'
import Landing         from './components/Landing'
import InterviewSetup  from './components/InterviewSetup'
import Room            from './components/Room'
import WatchRoom       from './components/WatchRoom'
import CallSetup       from './components/CallSetup'
import CallRoom        from './components/CallRoom'

function InterviewRoomRoute() {
  const { sessionId } = useParams()
  const { state }     = useLocation()
  return <Room sessionId={sessionId} state={state} />
}

function WatchRoomRoute() {
  const { sessionId } = useParams()
  return <WatchRoom sessionId={sessionId} />
}

function CallSetupRoute() {
  const { type } = useParams()
  return <CallSetup type={type} />
}

function CallRoomRoute() {
  const { type, sessionId } = useParams()
  return <CallRoom type={type} sessionId={sessionId} />
}

export default function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/"                        element={<Landing />} />
        <Route path="/interview"               element={<InterviewSetup />} />
        <Route path="/interview/:sessionId"    element={<InterviewRoomRoute />} />
        <Route path="/watch/:sessionId"        element={<WatchRoomRoute />} />
        <Route path="/call/:type"              element={<CallSetupRoute />} />
        <Route path="/call/:type/:sessionId"   element={<CallRoomRoute />} />
      </Routes>
    </HashRouter>
  )
}