import Tags from '@/components/Tags'
import TickOrCross from '@/components/TickOrCross'
import { CardList, Section } from '@blueprintjs/core'
import type { TeamLearningActivity } from '@inject/graphql/fragment-types'
import type { FC } from 'react'
import MilestoneIndicator from '../InstructorMilestones/MilestoneIndicator'
import { reached, subtitle, title } from './classes'

interface LearningActivityProps {
  activity: TeamLearningActivity
  teamId: string
  disabled?: boolean
}

const LearningActivity: FC<LearningActivityProps> = ({
  activity,
  teamId,
  disabled,
}) => (
  <Section
    compact
    title={<div className={title}>{activity.activity.name}</div>}
    subtitle={
      <div className={subtitle}>
        {activity.activity.description && (
          <div>{activity.activity.description}</div>
        )}
        {activity.activity.tags && <Tags tags={activity.activity.tags} />}
      </div>
    }
    className={activity.reached ? reached : undefined}
    rightElement={<TickOrCross value={!!activity.reached} />}
  >
    {activity.milestoneStates.length > 0 && (
      <CardList bordered={false} compact>
        {activity.milestoneStates.map(milestoneState => (
          <MilestoneIndicator
            key={milestoneState.id}
            milestone={milestoneState}
            teamId={teamId}
            disabled={disabled}
          />
        ))}
      </CardList>
    )}
  </Section>
)

export default LearningActivity
