import React, { useCallback, useEffect, useState } from 'react'
import dayjs from 'dayjs'
import { Link as ConnectedLink, generatePath } from 'react-router-dom'
import { getNavigationValue } from '@brojs/cli'
import {
  Box,
  CardHeader,
  CardBody,
  CardFooter,
  ButtonGroup,
  Stack,
  StackDivider,
  Button,
  Card,
  Heading,
  Tooltip,
  Spinner,
} from '@chakra-ui/react'
import { useTranslation } from 'react-i18next'

import { api } from '../../__data__/api/api'
import { ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
import { Course } from '../../__data__/model'
import { CourseDetails } from './course-details'

export const CourseCard = ({ course }: { course: Course }) => {
  const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery()
  const [isOpened, setIsOpened] = useState(false)
  const { t } = useTranslation()
  
  useEffect(() => {
    if (isOpened) {
      getLessonList(course.id, true)
    }
  }, [isOpened])

  const handleToggleOpene = useCallback(() => {
    setIsOpened((opened) => !opened)
  }, [setIsOpened])

  return (
    <Card key={course._id} align="left">
      <CardHeader>
        <Heading as="h2" mt="0">
          {course.name}
        </Heading>
      </CardHeader>
      {isOpened && (
        <CardBody mt="16px">
          <Stack divider={<StackDivider />} spacing="8px">
            <Box as="span" textAlign="left">
              {`${t('journal.pl.course.startDate')} - ${dayjs(course.startDt).format(t('journal.pl.lesson.dateFormat'))}`}
            </Box>
            <Box as="span" textAlign="left">
              {t('journal.pl.course.lessonCount')} - {course.lessons.length}
            </Box>

            {populatedCourse.isFetching && <Spinner />}
            {!populatedCourse.isFetching && populatedCourse.isSuccess && (
              <CourseDetails populatedCourse={populatedCourse.data} />
            )}

            {getNavigationValue('link.journal.attendance') && (
              <Tooltip
                label={t('journal.pl.course.attendancePage')}
                fontSize="12px"
                top="16px"
              >
                <Button
                  leftIcon={<LinkIcon />}
                  as={ConnectedLink}
                  variant="outline"
                  colorScheme="blue"
                  to={generatePath(
                    `${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`,
                    { courseId: course.id },
                  )}
                >
                  <Box mt={3}></Box>
                  {t('journal.pl.course.attendance')}
                </Button>
              </Tooltip>
            )}
          </Stack>
        </CardBody>
      )}
      <CardFooter>
        <ButtonGroup
          spacing={[0, 4]}
          mt="16px"
          flexDirection={['column', 'row']}
        >
          <Tooltip label={t('journal.pl.course.attendancePage')} fontSize="12px" top="16px">
            <Button
              leftIcon={<LinkIcon />}
              as={ConnectedLink}
              colorScheme="blue"
              to={`${getNavigationValue('journal.main')}/lessons-list/${course._id}`}
            >
              {t('journal.pl.common.open')}
            </Button>
          </Tooltip>
          <Tooltip label={t('journal.pl.course.details')} fontSize="12px" top="16px">
            <Button
              colorScheme="blue"
              mt={['16px', 0]}
              variant="outline"
              leftIcon={
                <ArrowUpIcon
                  transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'}
                />
              }
              loadingText={t('journal.pl.common.loading')}
              isLoading={populatedCourse.isFetching}
              onClick={handleToggleOpene}
            >
              {isOpened ? t('journal.pl.close') : t('journal.pl.course.viewDetails')}
            </Button>
          </Tooltip>
        </ButtonGroup>
      </CardFooter>
    </Card>
  )
}