import InstructorInjectFocused from '@/instructor/InstructorInject/Focused'
import InstructorTodoLog from '@/instructor/InstructorTodoLog'
import LearningObjective from '@/instructor/LearningObjectives/LearningObjective'
import { useParams } from '@/router'
import OverviewButton from '@/views/InstructorView/OverviewButton'
import OverviewChannelButton from '@/views/InstructorView/OverviewChannelButton'
import useLeftBar from '@/views/InstructorView/useLeftNavbar'
import useRightBar from '@/views/InstructorView/useRightNavbar'
import type { TabId } from '@blueprintjs/core'
import { ButtonGroup, Divider, Tab, Tabs } from '@blueprintjs/core'
import { css } from '@emotion/css'
import { useTypedQuery } from '@inject/graphql/graphql'
import {
  GetExerciseChannels,
  GetTeamActionLogsFlat,
  GetTeamLearningObjectives,
} from '@inject/graphql/queries'
import notEmpty from '@inject/shared/utils/notEmpty'
import type { FC } from 'react'
import { useMemo, useState } from 'react'

const LearningObjectivesList: FC<{
  teamId: string
}> = ({ teamId }) => {
  const [{ data: objectivesData }] = useTypedQuery({
    query: GetTeamLearningObjectives,
    variables: { teamId },
    context: useMemo(
      () => ({
        suspense: true,
      }),
      []
    ),
  })
  const objectives = useMemo(
    () => objectivesData?.teamLearningObjectives?.filter(notEmpty) ?? [],
    [objectivesData]
  )

  return (
    <>
      <b style={{ fontSize: '1.2em' }}>Learning Objectives:</b>
      <div style={{ margin: '1rem' }}>
        {objectives.map(objective => (
          <LearningObjective
            defaultIsOpen={false}
            key={objective.id}
            objective={objective}
            teamId={teamId}
          />
        ))}
      </div>
    </>
  )
}

const TodoList: FC<{
  teamId: string
}> = ({ teamId }) => {
  const [{ data: actionLogData }] = useTypedQuery({
    query: GetTeamActionLogsFlat,
    variables: {
      teamId,
    },
    context: useMemo(
      () => ({
        suspense: true,
      }),
      []
    ),
  })
  const [value, setValue] = useState<TabId>('notdone')

  return (
    <>
      <div
        className={css`
          display: flex;
          justify-content: space-between;
          padding-right: 1rem;
        `}
      >
        <b style={{ fontSize: '1.2em' }}>To-do list:</b>
        <Tabs selectedTabId={value} onChange={e => setValue(e)}>
          <Tab title='Done' id='done' />
          <Tab title='Not done' id='notdone' />
        </Tabs>
      </div>
      <InstructorTodoLog
        height='36rem'
        actionLogs={null}
        contextType='team'
        actionLogIds={actionLogData?.actionLogs || []}
        selectedTeams={[teamId]}
        done={value === 'done'}
      />
    </>
  )
}

const ChannelList: FC<{
  exerciseId: string
  teamId: string
}> = ({ exerciseId, teamId }) => {
  const [{ data: channelData }] = useTypedQuery({
    query: GetExerciseChannels,
    variables: {
      exerciseId,
    },
    requestPolicy: 'cache-only',
  })

  return (
    <>
      <b style={{ fontSize: '1.2em' }}>Team Channels:</b>
      <ButtonGroup style={{ width: '100%', flexWrap: 'wrap' }} minimal>
        {channelData?.exerciseChannels.map(channel => (
          <OverviewChannelButton
            channel={channel}
            exerciseId={exerciseId}
            teamId={teamId}
            linkTo='instructor'
            key={channel.id}
          />
        ))}
      </ButtonGroup>
    </>
  )
}

const Page = () => {
  // todo: remove reliance on automatic events
  const { exerciseId, teamId } = useParams('/instructor/:exerciseId/:teamId')
  const elementLeft = useLeftBar(<OverviewButton exerciseId={exerciseId} />)
  const elementRight = useRightBar(
    <InstructorInjectFocused exerciseId={exerciseId} teamId={teamId} />
  )
  return (
    <div>
      {elementLeft}
      {elementRight}
      <ChannelList exerciseId={exerciseId} teamId={teamId} />
      <Divider />
      <LearningObjectivesList teamId={teamId} />
      <Divider />
      <TodoList teamId={teamId} />
    </div>
  )
}

export default Page
