import { FC, memo } from 'react';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

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

import {
  FeedPostCardProps,
  ReactionsDisabledProps,
  ReactionsEnabledProps,
} from './UnifiedPostCard/types';

export type PostCardProps = Pick<
  FeedPostCardProps,
  | 'post'
  | 'isDetail'
  | 'isPinned'
  | 'hideComments'
  | 'hideTranslation'
  | 'matchText'
  | 'showExternalLink'
  | 'postApprovalControls'
  | 'openProfileInNewTab'
  | 'hideAction'
  | 'hidePinIcon'
  | 'elementId'
  | 'hideKeyUpdateHeader'
  | 'abbreviateDate'
  | 'hideFeatures'
  | 'mediaMaxHeight'
  | 'showSeeMoreToggle'
  | 'onShowMore'
  | 'onShowLess'
  | 'onClick'
> &
  (ReactionsEnabledProps | ReactionsDisabledProps);

const PostCard: FC<PostCardProps> = memo(props => {
  const {
    hideReactions = false,
    hideComments = false,
    hideTranslation = false,
    onAddReaction,
    onRemoveReaction,
    isPinned = false,
    matchText = '',
    showExternalLink = false,
    postApprovalControls,
    openProfileInNewTab = false,
    isDetail = false,
    post,
    hideAction = false,
    hidePinIcon = false,
    elementId,
    hideKeyUpdateHeader = false,
    abbreviateDate,
    hideFeatures = false,
    mediaMaxHeight,
    showSeeMoreToggle,
    onShowMore,
    onShowLess,
    onClick,
  } = props;

  return (
    <UnifiedPostCard
      context="feed"
      post={post}
      hideReactions={hideReactions}
      hideComments={hideComments}
      hideTranslation={hideTranslation}
      matchText={matchText}
      showExternalLink={showExternalLink}
      openProfileInNewTab={openProfileInNewTab}
      postApprovalControls={postApprovalControls}
      isPinned={isPinned}
      isDetail={isDetail}
      onAddReaction={onAddReaction}
      onRemoveReaction={onRemoveReaction}
      hideAction={hideAction}
      hidePinIcon={hidePinIcon}
      hideKeyUpdateHeader={hideKeyUpdateHeader}
      elementId={elementId}
      abbreviateDate={abbreviateDate}
      hideFeatures={hideFeatures}
      mediaMaxHeight={mediaMaxHeight}
      showSeeMoreToggle={showSeeMoreToggle}
      onShowMore={onShowMore}
      onShowLess={onShowLess}
      onClick={onClick}
    />
  );
});

PostCard.displayName = 'PostCard';

const PostCardThemeProvider = (props: PostCardProps) => {
  const HugoThemeProvider = useHuGoTheme();

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

export default PostCardThemeProvider;