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

import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import CardActionArea from '@material-hu/mui/CardActionArea';
import CardActions from '@material-hu/mui/CardActions';
import CardMedia from '@material-hu/mui/CardMedia';
import Divider from '@material-hu/mui/Divider';
import Typography from '@material-hu/mui/Typography';

import { librariesRoutes } from 'src/pages/dashboard/libraries/routes';
import { IconTypes } from 'src/types/icons';
import { ArticleChild } from 'src/types/libraries';

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

export type ArticleChildCardProps = ArticleChild;

export const ArticleChildCard = ({
  id,
  icon,
  title,
}: ArticleChildCardProps) => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(librariesRoutes.library(id));
  };

  return (
    <Card sx={{ p: 1, width: 200, height: 200 }}>
      <CardActionArea
        onClick={handleClick}
        sx={{
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100px',
            mt: 1,
          }}
        >
          <CardMedia
            component={WidgetIcon}
            icon={icon}
            height={
              icon.type === IconTypes.IMAGE && icon.custom ? '100%' : '100px'
            }
            width={
              icon.type === IconTypes.IMAGE && icon.custom ? '100%' : '100px'
            }
            objectFit="contain"
          />
        </Box>
        <Box sx={{ width: '100%' }}>
          <Divider />
          <CardActions
            sx={{ justifyContent: 'center', height: '50px', maxHeight: '50px' }}
          >
            <Typography
              color="textPrimary"
              sx={{
                textAlign: 'center',
                fontWeight: 'bold',
                display: '-webkit-box',
                overflow: 'hidden',
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: 2,
                wordBreak: 'break-word',
              }}
            >
              {title}
            </Typography>
          </CardActions>
        </Box>
      </CardActionArea>
    </Card>
  );
};

export default ArticleChildCard;