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

import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import CardMedia from '@material-hu/mui/CardMedia';
import Typography from '@material-hu/mui/Typography';

import { IconTypes } from 'src/types/icons';

import { WidgetIcon } from 'src/components/dashboard/widgets/WidgetIcon';

export type ChapterCardProps = {
  chapter: any;
  route: any;
};

export const ChapterCard: FC<ChapterCardProps> = props => {
  const { chapter, route } = props;

  const navigate = useNavigate();

  const handleClick = () => {
    navigate(route);
  };

  return (
    <Card
      sx={{
        display: 'flex',
        borderRadius: '10px',
        height: '80px',
        boxShadow: '0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.50)',
        cursor: 'pointer',
      }}
      onClick={handleClick}
    >
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: '80px',
          height: '80px',
          borderRight: '2px solid #e3e4e4',
          '& img.MuiBox-root ': {
            p:
              !chapter.icon.custom && chapter.icon.type === IconTypes.IMAGE
                ? 3
                : 0,
          },
        }}
      >
        <CardMedia
          component={WidgetIcon}
          icon={chapter.icon}
          height="80px"
          width="80px"
          objectFit={
            chapter.icon.type === IconTypes.EMOJI ? 'contain' : 'cover'
          }
          fontSize="30px"
        />
      </Box>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          height: '100%',
        }}
      >
        <CardContent
          sx={{
            flex: '1 0 auto',
            p: 1,
            width: '100%',
            height: '100%',
            '&.MuiCardContent-root:last-child': {
              paddingBottom: '8px',
            },
          }}
        >
          <Box sx={{ display: 'flex' }}>
            <Typography
              component="div"
              variant="h6"
              gutterBottom
              style={{
                lineHeight: '1.2em',
                height: '3.6em',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                display: '-webkit-box',
                WebkitLineClamp: 3,
                WebkitBoxOrient: 'vertical',
              }}
            >
              {chapter.title || chapter.name}
            </Typography>
          </Box>
        </CardContent>
      </Box>
    </Card>
  );
};

export default ChapterCard;