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

import { IconMessageCircle } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import CardActionArea from '@material-hu/mui/CardActionArea';
import CardContent from '@material-hu/mui/CardContent';
import CardMedia from '@material-hu/mui/CardMedia';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import usePermissions from 'src/hooks/usePermissions';
import { Article } from 'src/types/news';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

import TimeDistance from 'src/components/time/TimeDistance';

import { newsRoutes } from '../routes';

import NewsCardReactions from './NewsCardReactions';
import NewsMenu from './NewsMenu';
import TopicChips from './TopicChips';

const {
  CREATE_COMMENT_IN_ARTICLES,
  CREATE_COMMENT,
  CAN_REACT_ARTICLES,
  CAN_REACT_CONTENT,
} = UserPermissions;

export type NewsCardProps = Article & {
  filter: number | null;
  searchQuery: string;
};

export const NewsCard: FC<NewsCardProps> = props => {
  const {
    id,
    title,
    coverPicture,
    commentCount,
    topics,
    publicationDateTime,
    reactions,
    filter,
    searchQuery,
  } = props;

  const { t } = useTranslation(['post', 'web_only']);
  const { hasAny: canViewComments } = usePermissions([
    CREATE_COMMENT_IN_ARTICLES,
    CREATE_COMMENT,
  ]);
  const { hasAny: canReactContent } = usePermissions([
    CAN_REACT_ARTICLES,
    CAN_REACT_CONTENT,
  ]);

  return (
    <Card
      variant="outlined"
      sx={{
        borderColor: theme => theme.palette.new.border.neutral.default,
        borderRadius: 2,
        overflow: 'hidden',
      }}
    >
      <CardActionArea
        component={Link}
        to={newsRoutes.article.detail(id)}
        disableRipple
        style={{ textDecoration: 'none' }}
      >
        <Box
          sx={{
            aspectRatio: '11 / 3.5',
            position: 'relative',
            overflow: 'hidden',
          }}
        >
          <CardMedia
            component="img"
            image={coverPicture}
            sx={{ height: '100%', width: '100%', objectFit: 'cover' }}
          />
          <Box
            onClick={e => {
              e.stopPropagation();
              e.preventDefault();
            }}
            sx={{
              position: 'absolute',
              right: 8,
              top: 8,
              zIndex: 1,
              '& .MuiIconButton-root': {
                backgroundColor: theme =>
                  theme.palette.new.background.layout.tertiary,
                '&:hover': {
                  backgroundColor: theme =>
                    theme.palette.new.background.layout.tertiary,
                },
              },
            }}
          >
            <NewsMenu id={id} />
          </Box>
        </Box>
        <CardContent sx={{ px: 2, pt: 2, pb: 1.5 }}>
          <Typography
            component="div"
            variant="globalM"
            fontWeight="semiBold"
            sx={{
              color: theme => theme.palette.new.text.neutral.default,
              minHeight: '2.8em',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              display: '-webkit-box',
              WebkitLineClamp: 2,
              WebkitBoxOrient: 'vertical',
            }}
          >
            {title}
          </Typography>
          <TimeDistance
            date={new Date(publicationDateTime)}
            showIcon={false}
            sx={{ width: 'fit-content' }}
            typographySx={{
              fontWeight: 400,
              fontSize: '14px',
            }}
          />
        </CardContent>
        {topics && topics.length > 0 && <TopicChips topics={topics} />}
      </CardActionArea>
      {(canReactContent || (canViewComments && commentCount !== null)) && (
        <Divider sx={{ mt: 2 }} />
      )}
      {canReactContent && (
        <Box sx={{ px: 2, py: 1.5 }}>
          <NewsCardReactions
            articleId={id}
            reactions={reactions}
            filter={filter}
            searchQuery={searchQuery}
          />
        </Box>
      )}
      {canViewComments && commentCount !== null && (
        <Stack
          alignItems="center"
          justifyContent="space-between"
          sx={{ flexDirection: 'row', px: 2, py: 1.5, width: '100%' }}
        >
          <Stack
            alignItems="center"
            gap={0.5}
            sx={{
              flexDirection: 'row',
              color: theme => theme.palette.new.text.neutral.brand,
            }}
          >
            <IconMessageCircle size={18} />
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
              color={theme => theme.palette.new.text.neutral.brand}
            >
              {t('post:comment_action')}
            </Typography>
          </Stack>
          <Typography
            variant="globalXS"
            sx={{
              color: theme => theme.palette.new.text.neutral.lighter,
              fontWeight: 'semiBold',
            }}
          >
            {t('web_only:comments.comment_count', {
              count: commentCount,
            })}
          </Typography>
        </Stack>
      )}
    </Card>
  );
};

export default NewsCard;
