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

import ArticleChildren from 'src/pages/dashboard/libraries/components/ArticleChildren';
import ArticleMenu from 'src/pages/dashboard/libraries/components/ArticleMenu';
import { Article } from 'src/types/libraries';
import { splitByTypes } from 'src/utils/attachments';

import { AttachmentsList } from 'src/components/attachment';
import HTMLBody from 'src/components/HTMLBody';

export type ArticleCardProps = Article;

const ArticleCard = ({
  id: articleId,
  title,
  body,
  attachments,
  children: articleChildren,
  coverPicture,
}: ArticleCardProps) => {
  return (
    <Card>
      <CardHeader
        sx={{ py: 1 }}
        action={<ArticleMenu id={articleId} />}
      />
      {coverPicture && (
        <CardMedia
          image={coverPicture}
          sx={{ height: 180 }}
        />
      )}
      <CardContent
        component={Container}
        maxWidth="sm"
      >
        <Typography
          component="div"
          variant="h5"
          gutterBottom
        >
          {title}
        </Typography>
        <Divider sx={{ borderWidth: '1px' }} />
        <ArticleChildren
          sx={{ py: 2 }}
          articleChildren={articleChildren}
        />
        {body && <HTMLBody body={body} />}
        {!!attachments?.length && (
          <Box sx={{ mt: 2 }}>
            <AttachmentsList
              {...splitByTypes(attachments)}
              mediaListType="carousel"
              enableOpenFile
            />
          </Box>
        )}
      </CardContent>
    </Card>
  );
};

export default ArticleCard;