import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { RoleSelector } from './RoleSelector'
import { useClassroomLogic } from '@/utils/hooks/useClassroomLogic'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Room } from './Room'

export function Dashboard() {
  const {
    roleState,
    currentClass,
    handleRoleSelect,
    handleJoinClass,
    handleLeaveClass,
    handleCreateClass,
    handleEditClass,
    handleDeleteClass,
  } = useClassroomLogic()
  const navigate = useNavigate()

  useEffect(() => {
    if (roleState === 'dashboard') {
      navigate(ROUTES_ENUM.protected.admin.classroom.classes, { replace: true })
    }
  }, [roleState, navigate])

  if (roleState === 'role-selection') {
    return <RoleSelector onRoleSelect={handleRoleSelect} />
  } else if (roleState === 'dashboard') {
    return null
  } else if (roleState === 'classroom' && currentClass) {
    return <Room classSession={currentClass} onLeaveClass={handleLeaveClass} />
  }
  return null
}