import ActionLog from '@/actionlog/ActionLog'
import InstructorInject from '@/instructor/InstructorInject'
import { useParams } from '@/router'
import useRightBar from '@/views/InstructorView/useRightNavbar'
import Container from '@inject/shared/components/Container'

const Page = () => {
  const { exerciseId, teamId, channelId } = useParams(
    '/instructor/:exerciseId/:teamId/:channelId/info'
  )
  const element = useRightBar(
    <InstructorInject teamId={teamId} exerciseId={exerciseId} />
  )

  return (
    <Container id='scrollAlog'>
      {element}
      <ActionLog
        inInstructor
        exerciseId={exerciseId}
        teamId={teamId}
        channelId={channelId}
        getFullscreenLink={actionLogId => [
          '/instructor/:exerciseId/:teamId/:channelId/info/:actionLogId',
          {
            params: { exerciseId, teamId, channelId, actionLogId },
          },
        ]}
      />
    </Container>
  )
}

export default Page
