import LinkButton from '@/components/LinkButton'
import { useNavigate } from '@/router'
import { useSetPageTitle } from '@/utils'
import usePrependNavbar from '@/views/Navbar/usePrependNavbar'
import { Button, 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;
`

const ExerciseComponent: FC<{ exercise: Exercise }> = ({ exercise }) => {
  const nav = useNavigate()

  return (
    <div
      className={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;
      `}
    >
      <h3>{exercise.name}</h3>
      {/* <p>{exercise.description}</p> */}
      <p>Duration: {exercise.config.exerciseDuration} minutes</p>
      <Button
        icon={exercise.finished ? 'folder-shared-open' : 'play'}
        style={{ float: 'right' }}
        onClick={() =>
          nav('/trainee/:exerciseId', { params: { exerciseId: exercise.id } })
        }
        large
        outlined
        intent='primary'
        title='Enter exercise'
      >
        {exercise.finished && 'Open'}
        {!exercise.finished && 'Join'}
      </Button>
      <div
        className={css`
          display: flex;
          gap: 0.5rem;
        `}
      >
        {exercise.running && (
          <Tag intent='success' round large>
            Running
          </Tag>
        )}
        {exercise.finished && (
          <Tag intent='success' round large>
            Finished
          </Tag>
        )}
        {!exercise.running && !exercise.finished && (
          <Tag intent='warning' round large>
            Paused
          </Tag>
        )}
      </div>
    </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
