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

import FolderOpenIcon from '@material-hu/icons/material/FolderOpen';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from 'src/pages/dashboard/scorm/i18n';
import { scormRoutes } from 'src/pages/dashboard/scorm/routes';
import { Folder } from 'src/types/scorm';

export type FolderCardProps = {
  folder: Folder;
};

const FolderCard: FC<FolderCardProps> = props => {
  const { folder } = props;

  const navigate = useNavigate();
  const { t } = useTranslation();
  const theme = useTheme();

  const handleNavigateFolderCourses = () =>
    navigate(scormRoutes.folder(folder.name), {
      state: { courses: folder.courses },
    });

  return (
    <Card
      id={folder.name}
      onClick={handleNavigateFolderCourses}
      sx={{
        height: '190px',
        width: '320px',
        borderRadius: '20px',
        boxShadow: theme.shadows[24],
        cursor: 'pointer',
      }}
    >
      <Stack
        sx={{
          justifyContent: 'center',
          alignItems: 'center',
          height: '80px',
          width: '100%',
          backgroundColor: '#F8F9FA',
        }}
      >
        <FolderOpenIcon
          sx={{
            width: '56px',
            height: '56px',
            color: folder.color,
          }}
        />
      </Stack>
      <CardContent
        sx={{
          flex: '1 0 auto',
          px: 3,
          pt: 2.5,
          width: '100%',
          height: '124px',
        }}
      >
        <Stack>
          <Typography
            variant="subtitle1"
            sx={{
              lineHeight: '1em',
              height: '2em',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              display: '-webkit-box',
              WebkitLineClamp: 2,
              WebkitBoxOrient: 'vertical',
              mb: 2,
            }}
          >
            {folder.name}
          </Typography>
          <Typography variant="body2">
            {t('COURSES_AMOUNT', { courses_amount: folder.courses.length })}
          </Typography>
        </Stack>
      </CardContent>
    </Card>
  );
};

export default FolderCard;