import { type FC } from 'react';

import Stack from '@material-hu/mui/Stack';

import { type FeedPendingPost } from 'src/types/feed';
import { type GroupPendingPost } from 'src/types/groups';
import { PostRequestActionType } from 'src/types/posts';

import PostCard from 'src/components/post/PostCard';

import GroupPostCard from '../../pages/dashboard/groups/components/GroupPostCard';

import { EditionComparisonCard } from './EditionComparisonCard';
import { getPostWithPendingContent } from './getPostWithPendingContent';

type Props = {
  pendingPost: GroupPendingPost | FeedPendingPost;
  onApprove: (postId: number) => void;
  onReject: (postId: number) => void;
};

const PendingPostCard: FC<Props> = props => {
  const { pendingPost, onApprove, onReject } = props;

  const handleApprove = () => {
    onApprove(pendingPost.id);
  };

  const handleReject = () => {
    onReject(pendingPost.id);
  };

  if ('groupPost' in pendingPost) {
    if (pendingPost.actionType === PostRequestActionType.EDITION) {
      return (
        <EditionComparisonCard
          pendingPost={pendingPost}
          post={pendingPost.groupPost}
          onApprove={handleApprove}
          onReject={handleReject}
        />
      );
    }

    const postWithPendingContent = getPostWithPendingContent(
      pendingPost.groupPost,
      pendingPost.postContent,
      pendingPost.updatedAt,
    );

    return (
      <Stack sx={{ gap: 1 }}>
        <GroupPostCard
          hideReactions
          hideComments
          hideTranslation
          postApprovalControls={{
            handleApprove,
            handleReject,
          }}
          openProfileInNewTab
          post={postWithPendingContent}
        />
      </Stack>
    );
  }

  if (pendingPost.actionType === PostRequestActionType.EDITION) {
    return (
      <EditionComparisonCard
        pendingPost={pendingPost}
        post={pendingPost.post}
        onApprove={handleApprove}
        onReject={handleReject}
      />
    );
  }

  const postWithPendingContent = getPostWithPendingContent(
    pendingPost.post,
    pendingPost.postContent,
    pendingPost.updatedAt,
  );

  return (
    <Stack sx={{ gap: 1 }}>
      <PostCard
        hideReactions
        hideComments
        hideTranslation
        postApprovalControls={{
          handleApprove,
          handleReject,
        }}
        openProfileInNewTab
        post={postWithPendingContent}
      />
    </Stack>
  );
};

export default PendingPostCard;