import React, {useCallback, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Pressable, Typography} from '@components';
import {Comment as CommentType} from '@interfaces/comments';
import {UserPermissions} from '@interfaces/user';
import ContentActionsDialog, {
  ContentType,
} from '@modules/acknowledgement/components/ContentActionsDialog';
import {usePermission, useUserId} from '@redux/selectors';
import {useTheme} from '@shared/theme';
import {Comment} from '@shared/components';

import {styles} from './styles';

interface CommentItemProps {
  item: CommentType;
  onTagPress: (targetId: number) => void;
  onReplyPress: (id: number) => () => void;
  onDetailPress: (id: number) => () => void;
  toggleReactionsBottomSheet: (comment: CommentType) => void;
  onToggleReactionsListDrawer: (comment: CommentType, reaction: string) => void;
  onReactionPress: (reaction: string, comment: CommentType) => void;
}

interface SelectedComment {
  item: CommentType;
  isOwner: boolean;
}

export function CommentItem({
  item,
  onTagPress,
  onReplyPress,
  onDetailPress,
  toggleReactionsBottomSheet,
  onReactionPress,
  onToggleReactionsListDrawer,
}: CommentItemProps) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const [showMenuOptions, setShowMenuOptions] = useState(false);
  const [selectedComment, setSelectedComment] =
    useState<Nullable<SelectedComment>>(null);
  const firstChild = item.children?.[0];
  const isAdmin = usePermission(UserPermissions.MANAGE_COMMENTS);
  const currentUserId = useUserId();

  const onToggleReactionsBottomSheet = useCallback(
    () => toggleReactionsBottomSheet(item),
    [toggleReactionsBottomSheet, item],
  );

  const onHandleReactionPress = useCallback(
    (reaction: string) => onReactionPress(reaction, item),
    [onReactionPress, item],
  );

  const onPressUser = useCallback(
    (targetUserId: number) => () => onTagPress(targetUserId),
    [onTagPress],
  );

  const showCommentOptions = useCallback(
    (comment: CommentType) => () => {
      setSelectedComment({
        item: comment,
        isOwner: currentUserId === comment.user.id,
      });
      setShowMenuOptions(true);
    },
    [currentUserId],
  );

  const hideCommentOptions = useCallback(() => {
    setShowMenuOptions(false);
    setSelectedComment(null);
  }, []);

  const onPressReactionsListDrawer = useCallback(
    (reaction: string) => onToggleReactionsListDrawer(item, reaction),
    [onToggleReactionsListDrawer, item],
  );

  return (
    <>
      <Comment
        containerStyle={styles.comment}
        firstName={item.user.firstName}
        lastName={item.user.lastName}
        avatar={item.user.profilePicture}
        comment={item.body}
        createAt={item.createdAt}
        multimediaAttachments={item.attachments}
        bodyAttributes={item.bodyAttributes}
        onPressUser={onPressUser(item.user.id)}
        onTagPress={onTagPress}
        onReactionPress={onHandleReactionPress}
        showOptions={currentUserId === item.user.id || isAdmin}
        reactions={item.reactions || []}
        onPressLeftIcon={showCommentOptions(item)}
        onToggleReactionsBottomSheet={onToggleReactionsBottomSheet}
        onToggleReactionsListDrawer={onPressReactionsListDrawer}
      />
      <Pressable onPress={onReplyPress(item.id)} style={styles.replyContainer}>
        <Typography weight="semiBold" variant="xs" color={theme.primaryText}>
          {t('general.reply')}
        </Typography>
      </Pressable>
      {item.childrenNumber > 1 && (
        <Pressable onPress={onDetailPress(item.id)}>
          <Typography
            color={theme.primaryText}
            weight="semiBold"
            variant="xs"
            style={styles.showMoreReplies}>
            {t('acknowledgements.show_replies', {
              count: item.childrenNumber - 1,
            })}
          </Typography>
        </Pressable>
      )}
      {firstChild && (
        <Comment
          containerStyle={[styles.comment, styles.marginBottom]}
          firstName={firstChild.user?.firstName}
          lastName={firstChild.user?.lastName}
          onPressUser={onPressUser(firstChild.user?.id)}
          avatar={firstChild.user?.profilePicture}
          comment={firstChild.body}
          createAt={firstChild.createdAt}
          showOptions={currentUserId === firstChild.user.id || isAdmin}
          onPressLeftIcon={showCommentOptions(firstChild)}
          bodyAttributes={firstChild.bodyAttributes}
          isReply
          onTagPress={onTagPress}
          multimediaAttachments={firstChild.attachments}
        />
      )}
      {selectedComment && (
        <ContentActionsDialog
          isVisible={showMenuOptions}
          isOwner={selectedComment.isOwner}
          contentType={ContentType.COMMENT}
          onHide={hideCommentOptions}
          comment={selectedComment.item}
        />
      )}
    </>
  );
}