import { FC } from 'react';
import { UseQueryResult } from 'react-query';

import { AxiosResponse } from 'axios';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';

import { useAuth } from 'src/contexts/JWTContext';
import { FileTypes } from 'src/types/attachments';
import { GroupPost } from 'src/types/groups';
import { Post } from 'src/types/posts';
import { formatPublicationDate } from 'src/utils/date';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import Gif from 'src/components/attachment/Gif';
import PostBody from 'src/components/post/PostBody';

const MAX_CHARACTERS_LIMIT = 120;
const MAX_NEW_LINES_LIMIT = 2;
const RECOMMENDED_WIDTH = 248;
const RECOMMENDED_HEIGHT = 122;

type PostData = Post | GroupPost;

export type PostPreviewProps = {
  postDataQuery: UseQueryResult<AxiosResponse<PostData, any>, unknown>;
};

const PostPreview: FC<PostPreviewProps> = props => {
  const { postDataQuery } = props;

  const { t } = useTranslation('post');
  const { user: loggedUser } = useAuth();

  const { data, isLoading } = postDataQuery;
  const postData = data?.data;

  if (isLoading) {
    return (
      <Stack sx={{ gap: 2 }}>
        <Stack sx={{ gap: 1 }}>
          <HuSkeleton height={RECOMMENDED_HEIGHT} />
          <HuSkeleton variant="text" />
        </Stack>
        <Stack sx={{ gap: 1 }}>
          <HuSkeleton
            variant="text"
            width="70%"
          />
          <HuSkeleton
            variant="rectangular"
            height={RECOMMENDED_HEIGHT / 2}
          />
        </Stack>
      </Stack>
    );
  }

  if (!postData) {
    return null;
  }

  const {
    body,
    bodyAttributes,
    user,
    attachments = [],
    bodyHtml,
    publicationDatetime,
  } = postData;

  const mediaList = attachments.find(
    attachment =>
      FileTypes.IMAGE === attachment.type ||
      FileTypes.VIDEO === attachment.type,
  );

  const gif = attachments.find(attachment => attachment.type === FileTypes.GIF);

  return (
    <Stack sx={{ gap: 2 }}>
      <Stack sx={{ gap: 1 }}>
        <>
          {gif && (
            <Stack sx={{ alignItems: 'center' }}>
              <Gif media={gif} />
            </Stack>
          )}
          {mediaList && (
            <Stack
              sx={{
                justifyContent: 'center',
                aspectRatio: `${RECOMMENDED_WIDTH}/${RECOMMENDED_HEIGHT}`,
                overflow: 'hidden',
                '& img': {
                  display: 'block',
                  objectFit: 'cover',
                  width: '100%',
                  height: '100%',
                  borderRadius: 1,
                },
              }}
            >
              <img
                src={
                  mediaList.type === FileTypes.IMAGE
                    ? mediaList.url
                    : mediaList.thumbnailUrl
                }
                alt={t('attachment')}
              />
            </Stack>
          )}
        </>
        {publicationDatetime && loggedUser && (
          <Typography
            variant="globalXXS"
            color={theme => theme.palette.new.text.feedback.error}
          >
            {t('publication_date', {
              publicationDate: formatPublicationDate(
                new Date(publicationDatetime),
                loggedUser,
              ),
            })}
          </Typography>
        )}
      </Stack>
      <Stack sx={{ gap: 1 }}>
        {user && (
          <Typography fontWeight="fontWeightSemiBold">
            {getFullName(user)}
          </Typography>
        )}
        <PostBody
          bodyHtml={bodyHtml}
          body={body}
          bodyAttributes={bodyAttributes}
          maxCharacters={MAX_CHARACTERS_LIMIT}
          maxNewLines={MAX_NEW_LINES_LIMIT}
          readOnlySxContainer={{
            '& .tiptap': {
              padding: 0,
            },
          }}
          readOnlyWithShowMoreButton={false}
        />
      </Stack>
    </Stack>
  );
};

export default PostPreview;