import React from 'react'
import dayjs from 'dayjs'
import { Link as ConnectedLink } from 'react-router-dom'
import { getNavigationValue, getHistory } from '@brojs/cli'
import { Stack, Heading, Link, Button, Tooltip, Box } from '@chakra-ui/react'

import { useAppSelector } from '../../__data__/store'
import { isTeacher } from '../../utils/user'
import { PopulatedCourse } from '../../__data__/model'
import { api } from '../../__data__/api/api'
import { LinkIcon } from '@chakra-ui/icons'

type CourseDetailsProps = {
  populatedCourse: PopulatedCourse
}

const history = getHistory()

export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
  const user = useAppSelector((s) => s.user)
  const exam = populatedCourse.examWithJury
  const [toggleExamWithJury, examWithJuryRequest] =
    api.useToggleExamWithJuryMutation()

  return (
    <>
      {isTeacher(user) && (
        <Heading as="h3" mt={4} mb={3} size="lg">
          Экзамен: {exam?.name}{' '}
          {exam && getNavigationValue('exam.main') && getNavigationValue('link.exam.details') && (
            <Tooltip label="Начать экзамен" fontSize="12px" top="16px">
              <Button
                leftIcon={<LinkIcon />}
                as={'a'}
                colorScheme="blue"
                href={
                  getNavigationValue('exam.main') +
                  getNavigationValue('link.exam.details')
                    .replace(':courseId', populatedCourse.id)
                    .replace(':examId', exam.id)
                }
                onClick={(event) => {
                  event.preventDefault()
                  history.push(
                    getNavigationValue('exam.main') +
                    getNavigationValue('link.exam.details')
                        .replace(':courseId', populatedCourse.id)
                        .replace(':examId', exam.id),
                  )
                }}
              >
                Открыть
              </Button>
            </Tooltip>
          )}
        </Heading>
      )}
      {!Boolean(exam) && (
        <>
          <Heading as="h3" mt={4} mb={3} size="lg">
            Не задан
          </Heading>
          <Box mt={10}>
            <Tooltip label="Создать экзамен с жюри" fontSize="12px" top="16px">
              <Button
                colorScheme="blue"
                mt={['16px', 0]}
                variant="outline"
                isLoading={examWithJuryRequest.isLoading}
                onClick={() => toggleExamWithJury(populatedCourse.id)}
              >
                Создать
              </Button>
            </Tooltip>
          </Box>
        </>
      )}
      {Boolean(exam) && (
        <>
          <Heading as="h3" mt={4} mb={3} size="lg">
            Количество членов жюри:
          </Heading>
          <Heading as="h3" mt={4} mb={3} size="lg">
            {populatedCourse.examWithJury.jury.length}
          </Heading>
        </>
      )}
      <Heading as="h3" mt={4} mb={3} size="lg">
        Список занятий:
      </Heading>
      <Stack>
        {populatedCourse?.lessons?.map((lesson) => (
          <Link
            as={ConnectedLink}
            key={lesson.id}
            to={
              isTeacher(user)
                ? `${getNavigationValue('journal.main')}/lesson/${populatedCourse.id}/${lesson.id}`
                : ''
            }
          >
            {lesson.name}
          </Link>
        ))}
      </Stack>
    </>
  )
}