import LinkButton from '@/components/LinkButton'
import { useParams } from '@/router'
import ExerciseAssignment from '@/users/ExerciseAssignment'
import usePrependNavbar from '@/views/Navbar/usePrependNavbar'
import CenteredSpinner from '@inject/shared/components/CenteredSpinner'

export const Pending = () => <CenteredSpinner />

const ExerciseAssignmentPage = () => {
  const { exerciseId } = useParams('/exercise-panel/exercise/:exerciseId')
  const element = usePrependNavbar(
    <LinkButton
      link={['/exercise-panel']}
      button={{
        text: 'Exercise Panel',
        icon: 'panel',
        minimal: true,
      }}
      end
    />
  )
  return (
    <>
      {/* {portalNavbar &&
        loc.key !== 'default' &&
        createPortal(
          <LinkButton
            link={[-1]}
            button={{
              text: 'Back',
              icon: 'chevron-left',
              minimal: true,
            }}
            end
          />,
          portalNavbar
        )} */}
      {element}
      <ExerciseAssignment exerciseId={exerciseId} />
    </>
  )
}

export default ExerciseAssignmentPage
