import { useTeamStateMap } from '@/clientsettings/vars/teams'
import { useParams } from '@/router'
import useActionLogSubscriptionInstructor from '@inject/graphql/utils/Subscriptions/instructor'
import useQuestionnaireSubscriptionInstructor from '@inject/graphql/utils/Subscriptions/instructorQuestionnaireState'
import { useMemo } from 'react'
import { Outlet } from 'react-router-dom'

const LayoutExercise = () => {
  const { exerciseId } = useParams('/instructor/:exerciseId')
  const teamStateMap = useTeamStateMap()
  const selectedTeamStates = useMemo(
    () =>
      (Object.values(teamStateMap ?? {}) || [])
        .filter(teamState => teamState.show)
        .map(teamState => teamState.team.id),
    [teamStateMap]
  )
  useActionLogSubscriptionInstructor({
    exerciseId,
  })
  useQuestionnaireSubscriptionInstructor({
    exerciseId,
    teamIds: selectedTeamStates,
  })

  return <Outlet />
}

export default LayoutExercise
