import { useParams } from '@/router'
import getPopupProps from '@/views/TraineeView/getPopupProps'
import '@inject/graphql/urql/events.d.ts'
import useActionLogSubscriptionTrainee from '@inject/graphql/utils/Subscriptions/trainee'
import { usePopupContext } from '@inject/shared/popup/PopupContext'
import { useEventListener } from 'ahooks'
import { Outlet } from 'react-router-dom'

const Layout = () => {
  const { exerciseId, teamId } = useParams('/trainee/:exerciseId/:teamId')
  useActionLogSubscriptionTrainee({
    exerciseId,
    teamId,
  })

  const { showPopup } = usePopupContext()
  useEventListener('actionLogEvent', e => {
    const newActionLog = e.detail.actionLog

    console.log('new trainee log!', newActionLog)
    switch (newActionLog.details.__typename) {
      case 'InjectDetailsType':
      case 'CustomInjectDetailsType':
      case 'EmailType':
      case 'QuestionnaireType':
        if (!newActionLog.details.overlay) {
          break
        }

        showPopup({
          duration: newActionLog.details.overlay.duration,
          ...getPopupProps(newActionLog),
        })
        break
      default:
        break
    }
  })

  return <Outlet />
}

export default Layout
