import React, {useState} from 'react';
import {View, Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Typography, Comment, ReactionsSummaryComments} from '@components';
import {useReactionsSummary} from '@hooks/useReactionsSummary';
import {useCanInteractWithPost} from '@hooks/useCanInteractWithPost';
import {Comment as CommentType} from '@interfaces/comments';
import {UserPermissions} from '@interfaces/user';
import {Reaction} from '@interfaces/reaction';
import {ModalAction} from '@modules/app/redux/interfaces';
import ContentActionsDialog from '@modules/post/components/ContentActionsDialog';
import {usePermission, usePermissions} from '@redux/selectors';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface CommentItemProps {
  item: CommentType;
  onTagPress: (targetId: number) => void;
  onReactionPress: ({
    reaction,
    commentId,
    reactions,
  }: {
    reaction: string;
    commentId: number;
    reactions: Reaction[];
  }) => void;
  onToggleSelectNewReaction: ({comment}: {comment: CommentType}) => ModalAction;
  onReply: (item: CommentType) => void;
  isOwner: boolean;
  postId: number;
  groupId?: number;
  isMarketplace?: boolean;
  deleteParentId?: number;
  isReply?: boolean;
  isArchived?: boolean;
}

function CommentItem({
  postId,
  groupId,
  isMarketplace,
  deleteParentId,
  item,
  onTagPress,
  onReactionPress,
  onToggleSelectNewReaction,
  onReply,
  isOwner,
  isReply,
  isArchived,
}: CommentItemProps) {
  const {t} = useTranslation();
  const canReactPosts = usePermission(UserPermissions.CAN_REACT_POSTS);
  const canReactMarketplace = usePermission(
    UserPermissions.CAN_REACT_MARKETPLACE_POSTS,
  );
  const canReact = isMarketplace ? canReactMarketplace : canReactPosts;
  const [showMenuOptions, setShowMenuOptions] = useState(false);
  const {
    MANAGE_COMMENTS: manageComments,
    MANAGE_FEED_COMMENTS: manageFeedComments,
    MANAGE_MARKETPLACE_COMMENTS: manageMarketplaceComments,
  } = usePermissions();
  const {iAmAdmin} = useCanInteractWithPost(groupId);
  const isAdmin = isMarketplace
    ? manageMarketplaceComments
    : (manageComments && (!groupId || iAmAdmin)) ||
      (!groupId && manageFeedComments);
  const {theme} = useTheme();

  const {
    showReactionsSummary,
    selectedReaction,
    setSelectedReaction,
    onShowSummaryBottomSheet,
    onCloseReactionsSummary,
  } = useReactionsSummary();

  const onShowMenuOptions = () => setShowMenuOptions(true);

  const onReplyComment = () => onReply(item);

  const onHideDialog = (hide?: boolean) => setShowMenuOptions(!!hide);

  const onNewReaction = (comment: CommentType) => () =>
    onToggleSelectNewReaction({comment});
  return (
    <>
      <View style={styles.commentContainer}>
        <Comment
          canReact={canReact}
          firstName={item.user?.firstName}
          lastName={item.user?.lastName}
          isExternal={item.isExternal}
          avatar={item.user?.profilePicture}
          comment={item.body}
          isReply={isReply}
          showOptions={!isArchived && (isOwner || isAdmin)}
          createAt={item.createdAt}
          bodyAttributes={item.bodyAttributes}
          multimediaAttachments={item.attachments}
          onTagPress={onTagPress}
          onPressLeftIcon={onShowMenuOptions}
          onReactionPress={reaction =>
            onReactionPress({
              reaction,
              commentId: item.id,
              reactions: item.reactions,
            })
          }
          reactions={item.reactions}
          onToggleReactionsBottomSheet={onNewReaction(item)}
          onToggleReactionsListDrawer={onShowSummaryBottomSheet}
          isArchived={isArchived}
        />
        <Pressable onPress={onReplyComment} style={styles.replyContainer}>
          <Typography
            weight="semiBold"
            color={theme.text.neutral.brand}
            variant="xs">
            {t('general.reply')}
          </Typography>
        </Pressable>
      </View>
      <ContentActionsDialog
        isVisible={showMenuOptions}
        isOwner={isOwner}
        onHide={onHideDialog}
        comment={item}
        postId={postId}
        groupId={groupId}
        isMarketplace={isMarketplace}
        deleteParentId={isReply ? deleteParentId : undefined}
      />

      {showReactionsSummary && (
        <ReactionsSummaryComments
          showReactionsSummary
          setSelectedReaction={setSelectedReaction}
          reactions={item?.reactions}
          id={item.id}
          selectedReaction={selectedReaction}
          onCloseReactionsSummary={onCloseReactionsSummary}
          groupId={groupId}
          postId={postId}
        />
      )}
    </>
  );
}

export default CommentItem;