import LinkButton from '@/components/LinkButton'
import ExerciseTags from '@/components/Tags/ExerciseTags'
import { useSetPageTitle } from '@/utils'
import usePrependNavbar from '@/views/Navbar/usePrependNavbar'
import { ButtonGroup, Classes, Spinner, Tag } from '@blueprintjs/core'
import { css } from '@emotion/css'
import useAuthIdentity from '@inject/graphql/auth'
import type { Exercise } from '@inject/graphql/fragment-types'
import useExercisesSubscription from '@inject/graphql/utils/useExercisesSubscription'
import Container from '@inject/shared/components/Container'
import type { FC } from 'react'

const index = css`
  display: flex;
  flex-direction: column;
  justify-content: center;
`

export const exerciseClass = css`
  padding: 1rem;
  padding-top: 0;
  margin: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  .${Classes.DARK} & {
    border-color: rgba(255, 255, 255, 0.2);
  }

  box-shadow: rgba(0, 0, 0, 0.1) 0 0.125rem 0.5rem;
  transition: box-shadow 0.2s ease;
`

const ExerciseComponent: FC<{ exercise: Exercise }> = ({ exercise }) => (
  <div className={exerciseClass}>
    <h3>{exercise.name}</h3>
    {/* <p>{exercise.description}</p> */}
    <p>Duration: {exercise.config.exerciseDuration} minutes</p>
    <ButtonGroup style={{ float: 'right' }} large outlined>
      <LinkButton
        button={{
          text: exercise.finished ? 'Open' : 'Join',
          icon: exercise.finished ? 'folder-shared-open' : 'play',
          minimal: true,
          title: 'Enter exercise',
          intent: 'primary',
        }}
        link={[
          '/trainee/:exerciseId',
          {
            params: { exerciseId: exercise.id },
          },
        ]}
      />
    </ButtonGroup>
    <ExerciseTags finished={exercise.finished} running={exercise.running} />
  </div>
)

const Trainee = () => {
  useSetPageTitle('Trainee')
  const { isStaff } = useAuthIdentity()
  const [{ data, fetching }] = useExercisesSubscription()
  const available = data?.exercises.filter(exercise => exercise.running) || []
  const pending =
    data?.exercises.filter(
      exercise => !exercise.running && !exercise.finished
    ) || []
  const archived =
    data?.exercises.filter(
      exercise => !exercise.running && exercise.finished
    ) || []
  const element = usePrependNavbar(
    <LinkButton
      button={{
        minimal: true,
        text: 'Switch to Instructor',
        icon: 'book',
      }}
      link={['/instructor', { replace: true }]}
    />
  )

  return (
    <Container className={index}>
      {isStaff && element}
      <h1>Select your exercise {isStaff && <Tag round>Trainee</Tag>}</h1>
      <p>Boost your resilience and crisis preparedness</p>
      {available.length > 0 && (
        <>
          <h2>Available exercises {fetching && <Spinner />}</h2>
          {available.map(exercise => (
            <ExerciseComponent exercise={exercise} key={exercise.id} />
          ))}
        </>
      )}
      {pending.length > 0 && (
        <>
          <h2>Paused exercises</h2>
          {pending.map(exercise => (
            <ExerciseComponent exercise={exercise} key={exercise.id} />
          ))}
        </>
      )}
      {archived.length > 0 && (
        <>
          <h2>Archived exercises</h2>
          {archived.map(exercise => (
            <ExerciseComponent exercise={exercise} key={exercise.id} />
          ))}
        </>
      )}
      {!available && !archived && !pending && (
        <p>
          You haven&apos;t been assigned to any exercise yet or your exercise
          hasn&apos;t been started yet.
        </p>
      )}
    </Container>
  )
}

export default Trainee
