import { FC, ReactNode } from 'react';

import { IconPinned } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import CardHeader from '@material-hu/mui/CardHeader';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Avatar from '@material-hu/components/design-system/Avatar';
import Badge from '@material-hu/components/design-system/Badge';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';

import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type PinnedPostPreviewProps = {
  postId: number;
  pinnedPostsCount: number;
  onViewAllPinnedPosts: () => void;
  children: ReactNode;
};

export const PinnedPostPreview: FC<PinnedPostPreviewProps> = ({
  postId,
  pinnedPostsCount,
  onViewAllPinnedPosts,
  children,
}) => {
  const { t } = useTranslation(['post']);

  return (
    <HuCardContainer
      fullWidth
      padding={16}
      sx={{ mb: 2 }}
    >
      <CardHeader
        sx={{
          p: 0,
          pb: 2,
          '& .MuiCardHeader-avatar': {
            mr: 1.5,
          },
          '& .MuiCardHeader-content': {
            flex: 1,
          },
          '& .MuiCardHeader-action': {
            m: 0,
            alignSelf: 'center',
          },
        }}
        avatar={<Avatar Icon={IconPinned} />}
        title={
          <Stack
            direction="row"
            alignItems="center"
            spacing={1}
          >
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {t('post:pinned_posts')}
            </Typography>
            {pinnedPostsCount > 0 && (
              <Badge
                badgeContent={pinnedPostsCount}
                color="primary"
                sx={{
                  px: 0.5,
                }}
              />
            )}
          </Stack>
        }
        action={
          <Button
            variant="text"
            size="large"
            onClick={onViewAllPinnedPosts}
            sx={{ minWidth: 'unset' }}
          >
            {t('post:view_all_pinned_posts')}
          </Button>
        }
      />
      <Box data-post-id={postId}>{children}</Box>
    </HuCardContainer>
  );
};

export default PinnedPostPreview;