import { useNavigate } from 'react-router-dom';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

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

import useRoutes from '../../../hooks/useRoutes';
import { type PathCourseListItem } from '../../../paths/types';

export type CourseCardProps = {
  course?: PathCourseListItem;
  loading?: boolean;
};

const CourseCard = ({ course, loading = false }: CourseCardProps) => {
  const navigate = useNavigate();
  const routes = useRoutes();
  const { t } = useLokaliseTranslation('learning');
  const { shape, shadows, palette } = useTheme();

  if (loading) {
    return (
      <CardContainer
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1.5,
          },
        }}
      >
        <Image
          loading
          sx={{ height: '60px', borderRadius: shape.borderRadiusM }}
        />
        <Stack sx={{ flex: 1, gap: 0.5 }}>
          <Skeleton
            height={24}
            width="100%"
          />
          <Skeleton
            height={12}
            width="24%"
          />
        </Stack>
      </CardContainer>
    );
  }

  if (!course) return null;

  const handleNavigate = () => navigate(routes.courses.detail(course.id));

  return (
    <CardContainer
      onClick={handleNavigate}
      fullWidth
      noHover
      sx={{
        '&:hover': {
          boxShadow: shadows?.[1],
        },
        '& .MuiButtonBase-root:focus-visible': {
          border: '1px solid',
          borderColor: palette.new.border.neutral.brand,
        },
        '& .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)}
        sx={{ flex: 1 }}
      />
      <Button
        variant="tertiary"
        onClick={handleNavigate}
      >
        {t('course.start')}
      </Button>
    </CardContainer>
  );
};

export default CourseCard;