import LinkButton from '@/components/LinkButton'
import { useParams } from '@/router'
import InjectMessageView from '@/views/InjectMessageView'
import useLeftBar from '@/views/InstructorView/useLeftNavbar'

const Page = () => {
  const { teamId, exerciseId, channelId, actionLogId } = useParams(
    '/instructor/:exerciseId/:teamId/:channelId/form/:actionLogId'
  )
  const leftElement = useLeftBar(
    <LinkButton
      button={{ text: 'Back', minimal: true, icon: 'chevron-left' }}
      end
      link={[
        '/instructor/:exerciseId/:teamId/:channelId/form',
        {
          params: {
            exerciseId,
            teamId,
            channelId,
          },
        },
      ]}
    />
  )

  return (
    <>
      {leftElement}
      <InjectMessageView
        teamId={teamId}
        exerciseId={exerciseId}
        actionLogId={actionLogId}
        inInstructor
      />
    </>
  )
}

export default Page
