import { Section, SectionCard } from '@blueprintjs/core'
import { css } from '@emotion/css'
import type {
  Questionnaire,
  TeamQuestionnaireState,
} from '@inject/graphql/fragment-types'
import { type FC } from 'react'
import InstructorQuestionnaire from '.'
import Status from './Status'
import { canBeReviewed } from './utils'

const objectiveClass = css`
  flex-shrink: 0;
`

interface InstructorQuestionnaireCardProps {
  teamState: TeamQuestionnaireState
  questionnaire: Questionnaire
  teamId: string
  exerciseId: string
  collapsible?: boolean
  hideReview?: boolean
}

const InstructorQuestionnaireCard: FC<InstructorQuestionnaireCardProps> = ({
  teamState,
  questionnaire,
  teamId,
  exerciseId,
  collapsible,
  hideReview,
}) => (
  <Section
    key={questionnaire.id}
    title={questionnaire.title}
    className={objectiveClass}
    rightElement={
      <Status
        teamStateStatus={teamState.status}
        canBeReviewed={canBeReviewed(questionnaire.questions)}
      />
    }
    collapsible={collapsible}
  >
    <SectionCard padded>
      <InstructorQuestionnaire
        teamStateId={teamState.id}
        questionnaireId={questionnaire.id}
        teamId={teamId}
        exerciseId={exerciseId}
        status={teamState.status}
        content={questionnaire.content}
        questions={questionnaire.questions}
        teamAnswers={teamState.answers}
        relatedMilestones={teamState.relatedMilestones}
        hideReview={hideReview}
      />
    </SectionCard>
  </Section>
)
export default InstructorQuestionnaireCard
