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

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

const DefinitionAssignmentPage = () => {
  const { definitionId } = useParams('/exercise-panel/definition/:definitionId')
  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}

      <DefinitionAssignment definitionId={definitionId} />
    </>
  )
}

export default DefinitionAssignmentPage
