import { Classes } from '@blueprintjs/core'
import { css, cx } from '@emotion/css'
import { useTypedQuery } from '@inject/graphql/graphql'
import {
  GetAnalyticsMilestonesSimple,
  GetMilestones,
} from '@inject/graphql/queries'
import { type FC } from 'react'
import AllMilestoneIndicator from './AllMilestoneIndicator'
import MilestoneIndicator from './MilestoneIndicator'

interface InstructorMilestonesProps {
  exerciseId: string
  teamIds: string[]
}

const InstructorMilestones: FC<InstructorMilestonesProps> = ({
  teamIds,
  exerciseId,
}) => {
  const [{ data: states }] = useTypedQuery({
    query: GetAnalyticsMilestonesSimple,
    variables: { exerciseId },
  })
  const [{ data: milestones }] = useTypedQuery({
    query: GetMilestones,
    variables: { exerciseId },
  })

  return (
    <div
      className={cx(
        css`
          display: flex;
          flex-direction: column;
        `,
        Classes.CARD_LIST
      )}
    >
      <h3 style={{ order: 0, marginLeft: '0.5rem' }}>Reached</h3>
      <h3 style={{ order: 2, marginLeft: '0.5rem' }}>Not reached</h3>
      {teamIds.length === 1 &&
        states?.analyticsMilestones
          .filter(milestone => milestone.teamIds.includes(teamIds[0]))
          .map(milestone => (
            <MilestoneIndicator
              milestone={milestone}
              key={milestone.milestone.id}
              teamId={teamIds[0]}
            />
          ))}
      {teamIds.length !== 1 &&
        milestones?.milestones.map(milestone => (
          <AllMilestoneIndicator
            teamIds={teamIds}
            milestone={milestone}
            states={states?.analyticsMilestones || []}
            key={milestone.id}
          />
        ))}
    </div>
  )
}

export default InstructorMilestones
