import React, {memo, useCallback, useState} from 'react';
import {View} from 'react-native';
import {useDispatch} from 'react-redux';
import {Reactions} from '@components';
import {Comment, CommentableType} from '@interfaces/comments';
import {Reaction} from '@interfaces/reaction';
import {openReactionPicker} from '@modules/app/redux';
import {Post} from '@modules/post/interfaces';
import {Article} from '@modules/article/interfaces';
import {Acknowledgement} from '@modules/acknowledgement/interfaces';
import ReactionsSummaryPosts from '@modules/post/components/ReactionsSummaryPosts';

import {styles} from './styles';

export interface PostReactionsProps {
  reactions: Reaction[];
  isComment?: boolean;
  post: Post | Article | Comment | Acknowledgement;
  postId?: number;
  handleReaction: (reaction: string) => void;
  onReactionPickerPress?: (reaction: string) => void;
  articleId?: number;
  groupId?: number;
  isMarketplace?: boolean;
  parentId?: number;
  disabled?: boolean;
}

function PostReactions({
  reactions,
  isComment,
  post,
  postId,
  handleReaction,
  onReactionPickerPress,
  articleId,
  groupId,
  isMarketplace,
  parentId,
  disabled,
}: PostReactionsProps) {
  const dispatch = useDispatch();
  const [selectedReaction, setSelectedReaction] =
    useState<Nullable<string>>(null);
  const showReactionsSummary = !!selectedReaction;

  const handleToggleReactionPicker = useCallback(() => {
    dispatch(
      openReactionPicker({
        postId: isComment && postId ? postId : post.id,
        ...(isComment && {commentId: post.id}),
        onReactionSelected: onReactionPickerPress,
        commentableType: parentId
          ? CommentableType.COMMENT_THREAD
          : groupId
          ? CommentableType.GROUP_POST
          : articleId
          ? CommentableType.ARTICLE
          : isMarketplace
          ? CommentableType.MARKETPLACE
          : CommentableType.POST,
        reactions,
        shouldUpdateLastComment: false,
        articleId,
        groupId,
        parentId: isComment
          ? parentId
          : (post as Comment)?.parentId || undefined,
        isMarketplace,
      }),
    );
  }, [
    articleId,
    dispatch,
    groupId,
    isComment,
    isMarketplace,
    onReactionPickerPress,
    parentId,
    post,
    postId,
    reactions,
  ]);

  const onToggleReactionsListDrawer = (reaction: string) =>
    setSelectedReaction(reaction);

  const onCloseReactionsSummary = () => setSelectedReaction(null);

  return (
    <>
      <View style={styles.reactionsContainer}>
        <Reactions
          onToggleReactionsBottomSheet={handleToggleReactionPicker}
          onToggleReactionsListDrawer={onToggleReactionsListDrawer}
          reactions={reactions}
          onReactionPress={handleReaction}
          disabled={disabled}
        />
      </View>
      {showReactionsSummary && (
        <ReactionsSummaryPosts
          id={postId || post.id}
          selectedReaction={selectedReaction}
          showReactionsSummary
          setSelectedReaction={setSelectedReaction}
          reactions={reactions}
          onCloseReactionsSummary={onCloseReactionsSummary}
          articleId={articleId}
          groupId={groupId}
          isMarketplace={!!isMarketplace}
        />
      )}
    </>
  );
}

export default memo(PostReactions);
