import React from 'react'
import dayjs from 'dayjs'
import { Link as ConnectedLink } from 'react-router-dom'
import { getNavigationsValue } 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'

type CourseDetailsProps = {
    populatedCourse: PopulatedCourse;
}

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

    return (
        <>
            <Heading as="h3" mt={4} mb={3} size="lg">
                Экзамен:
            </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)
                                ? `${getNavigationsValue('journal.main')}/lesson/${populatedCourse.id}/${lesson.id}`
                                : ''
                        }
                    >
                        {lesson.name}
                    </Link>
                ))}
            </Stack>
        </>
    )
}