import { type MouseEvent } from 'react';

import { IconInfoCircle } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import { useTheme } from '@material-hu/mui/styles';

import Image from '@material-hu/components/composed-components/Image';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Title from '@material-hu/components/design-system/Title';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import defaultCourseImg from 'src/assets/svg/newDefaultCourse.svg';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getDurationTime } from 'src/utils/time';

import useCoursePreviewDrawer from '../../hooks/useCoursePreviewDrawer';
import useStartPath from '../../hooks/useStartPath';
import {
  type Path,
  type PathCourseListItem,
  PathCourseStatus as PathCourseStatusEnum,
} from '../../types';
import { getPathCourseStatus } from '../../utils';

import PathCourseStatus from './PathCourseStatus';

export type PathCourseCardProps = {
  path: Path;
  course: PathCourseListItem;
  courseIndex: number;
};

const PathCourseCard = ({ path, course, courseIndex }: PathCourseCardProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { shape, palette } = useTheme();
  const { startPath } = useStartPath(path);

  const { coursePreviewDrawer, showCoursePreviewDrawer } =
    useCoursePreviewDrawer(course.id);

  const status = getPathCourseStatus(path, courseIndex);
  const isBlocked = status === PathCourseStatusEnum.BLOCKED;

  const handleNavigate = () => startPath(course.id);

  const handlePreview = (event: MouseEvent) => {
    event.stopPropagation();
    showCoursePreviewDrawer({
      isBlocked,
      onNavigate: handleNavigate,
    });
  };

  return (
    <>
      {coursePreviewDrawer}
      <CardContainer
        onClick={isBlocked ? undefined : handleNavigate}
        fullWidth
        sx={{
          backgroundColor: isBlocked
            ? palette.new.background.elements.disabled
            : undefined,
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1.5,
          },
        }}
      >
        <Image
          src={course.pictureUrl}
          defaultSrc={defaultCourseImg}
          sx={{ height: '60px', borderRadius: shape.borderRadiusM }}
        />
        <Title
          variant="M"
          withEllipsis
          overflow="tooltip"
          copetin={course.category?.name}
          title={course.title}
          description={getDurationTime(course.durationTime)}
          disabled={isBlocked}
          sx={{ flex: 1 }}
        />
        <Tooltip description={t('path.courses.view_content')}>
          <IconButton
            aria-label={t('path.courses.view_content')}
            onClick={handlePreview}
            size="medium"
          >
            <IconInfoCircle />
          </IconButton>
        </Tooltip>
        <PathCourseStatus status={status} />
      </CardContainer>
    </>
  );
};

export default PathCourseCard;