import { FC, memo } from 'react';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useRequiredParams from 'src/hooks/useRequiredParams';

import UnifiedPostCard from 'src/components/post/UnifiedPostCard/index';

import {
  GroupsPostCardProps,
  ReactionsDisabledProps,
  ReactionsEnabledProps,
} from 'src/components/post/UnifiedPostCard/types';

import { useGroupMember } from '../GroupMemberContext';

export type GroupPostCardProps = Pick<
  GroupsPostCardProps,
  | 'post'
  | 'hideReactions'
  | 'hideComments'
  | 'hideTranslation'
  | 'showBreadcrumb'
  | 'onAddReaction'
  | 'onRemoveReaction'
  | 'isPinned'
  | 'hidePinIcon'
  | 'matchText'
  | 'showExternalLink'
  | 'postApprovalControls'
  | 'openProfileInNewTab'
  | 'hideAction'
> &
  (ReactionsEnabledProps | ReactionsDisabledProps);

const GroupPostCard: FC<GroupPostCardProps> = memo(props => {
  const {
    post,
    hideReactions = false,
    hideComments = false,
    hideTranslation = false,
    showBreadcrumb = false,
    onAddReaction,
    onRemoveReaction,
    isPinned = false,
    hidePinIcon = false,
    matchText = '',
    showExternalLink = false,
    postApprovalControls,
    openProfileInNewTab = false,
    hideAction = false,
  } = props;

  const { id: groupId } = useRequiredParams(['id']);
  const { userIsMember, isGroupArchived, isGroupAdmin } = useGroupMember();

  return (
    <UnifiedPostCard
      context="groups"
      post={post}
      groupId={groupId}
      hideReactions={hideReactions}
      hideComments={hideComments}
      hideTranslation={hideTranslation}
      showBreadcrumb={showBreadcrumb}
      matchText={matchText}
      showExternalLink={showExternalLink}
      openProfileInNewTab={openProfileInNewTab}
      postApprovalControls={postApprovalControls}
      isPinned={isPinned}
      hidePinIcon={hidePinIcon}
      viewed={post.viewed}
      userIsMember={userIsMember}
      isGroupArchived={isGroupArchived}
      isGroupAdmin={isGroupAdmin}
      onAddReaction={onAddReaction}
      onRemoveReaction={onRemoveReaction}
      hideAction={hideAction}
    />
  );
});

GroupPostCard.displayName = 'GroupPostCard';

const GroupPostCardThemeProvider = (props: GroupPostCardProps) => {
  const HugoThemeProvider = useHuGoTheme();

  return (
    <HugoThemeProvider>
      <GroupPostCard {...props} />
    </HugoThemeProvider>
  );
};

export default GroupPostCardThemeProvider;