import ExerciseContext from '@/analyst/ExerciseContext'
import TabButton from '@/analyst/OverflowTabs/TabButton'
import InstructorQuestionnaireCard from '@/instructor/InstructorQuestionnaire/InstructorQuestionnaireCard'
import {
  Boundary,
  ButtonGroup,
  Classes,
  Divider,
  OverflowList,
  Popover,
} from '@blueprintjs/core'
import { css } from '@emotion/css'
import type { Team } from '@inject/graphql/fragment-types'
import { useTypedQuery } from '@inject/graphql/graphql'
import { GetExerciseQuestionnaires } from '@inject/graphql/queries'
import CenteredSpinner from '@inject/shared/components/CenteredSpinner'
import Container from '@inject/shared/components/Container'
import notEmpty from '@inject/shared/utils/notEmpty'
import { Suspense, useContext, useMemo, useState } from 'react'

const wrapper = css`
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
`

const container = css`
  flex: 1;
  padding: 1rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
`

const Page = () => {
  const { exercise } = useContext(ExerciseContext)

  const [{ data }] = useTypedQuery({
    query: GetExerciseQuestionnaires,
    variables: { exerciseId: exercise.id },
    context: useMemo(
      () => ({
        suspense: true,
      }),
      []
    ),
  })

  const [selectedTeam, setSelectedTeam] = useState<Team>(exercise.teams[0])
  const handleClick = (item: Team) => () => setSelectedTeam(item)

  const overflowRenderer = (overflowItems: Team[]) => (
    <div style={{ marginLeft: 'auto' }}>
      <Popover
        content={
          <ButtonGroup vertical style={{ padding: 8 }}>
            {overflowItems.map(item => (
              <TabButton
                key={item.id}
                active={selectedTeam.id === item.id}
                onClick={handleClick(item)}
              >
                {item.name}
              </TabButton>
            ))}
          </ButtonGroup>
        }
        position='bottom-left'
      >
        <span className={Classes.BREADCRUMBS_COLLAPSED} style={{ margin: 4 }} />
      </Popover>
    </div>
  )

  const visibleItemRenderer = (item: Team) => (
    <TabButton
      key={item.id}
      active={selectedTeam.id === item.id}
      onClick={handleClick(item)}
    >
      {item.name}
    </TabButton>
  )

  return (
    <div className={wrapper}>
      <OverflowList
        style={{ alignItems: 'center', marginBottom: 8 }}
        collapseFrom={Boundary.END}
        items={exercise.teams}
        overflowRenderer={overflowRenderer}
        visibleItemRenderer={visibleItemRenderer}
      />

      <Divider />

      <Container className={container}>
        <Suspense fallback={<CenteredSpinner />}>
          {data?.questionnaires
            ?.filter(notEmpty)
            .map(questionnaire => (
              <InstructorQuestionnaireCard
                key={questionnaire.id}
                details={questionnaire}
                teamId={selectedTeam.id}
                exerciseId={exercise.id}
              />
            ))}
        </Suspense>
      </Container>
    </div>
  )
}

export default Page
