import React, {useState} from 'react';
import {View, Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Typography, Comment} from '@components';
import {Comment as CommentType} from '@interfaces/comments';
import {ModalAction} from '@modules/app/redux/interfaces';
import ContentActionsDialog, {
  ContentType,
} from '@modules/acknowledgement/components/ContentActionsDialog';
import {usePermissions} from '@redux/selectors';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface CommentItemProps {
  item: CommentType;
  index: number;
  overlayIndex: number;
  onTagPress: (targetId: number) => void;
  onReactionPress: (reaction: string) => void;
  onToggleSelectNewReaction: () => ModalAction;
  onReply: (item: CommentType, index: number) => void;
  isOwner: boolean;
  onToggleReactionsListDrawer: () => void;
  acknowledgementId?: number;
}

function CommentItem({
  item,
  index,
  overlayIndex,
  onTagPress,
  onReactionPress,
  onToggleSelectNewReaction,
  onReply,
  isOwner,
  onToggleReactionsListDrawer,
  acknowledgementId,
}: CommentItemProps) {
  const {t} = useTranslation();
  const isReplyComment = index !== 0;
  const [showMenuOptions, setShowMenuOptions] = useState(false);
  const {
    MANAGE_COMMENTS: manageComments,
    MANAGE_ACKNOWLEDGEMENTS_COMMENTS: manageAckComments,
    CAN_REACT_CONTENT: canReactGeneral,
    CAN_REACT_ACKNOWLEDGEMENTS: canReactAcknowledgement,
  } = usePermissions();
  const isAdmin = manageComments || manageAckComments;
  const canReact = canReactGeneral || canReactAcknowledgement;
  const {theme} = useTheme();
  const onShowMenuOptions = () => setShowMenuOptions(true);

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

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

  return (
    <>
      <View
        style={[
          styles.commentContainer,
          overlayIndex === index && styles.focusedContainer,
        ]}>
        <Comment
          canReact={canReact}
          firstName={item.user.firstName}
          lastName={item.user.lastName}
          avatar={item.user.profilePicture}
          comment={item.body}
          isReply={isReplyComment}
          showOptions={isOwner || isAdmin}
          createAt={item.createdAt}
          bodyAttributes={item.bodyAttributes}
          onTagPress={onTagPress}
          onPressLeftIcon={onShowMenuOptions}
          onReactionPress={onReactionPress}
          reactions={isReplyComment ? undefined : item.reactions}
          onToggleReactionsBottomSheet={onToggleSelectNewReaction}
          onToggleReactionsListDrawer={onToggleReactionsListDrawer}
        />
        <Pressable onPress={onReplyComment} style={styles.replyContainer}>
          <Typography
            weight="semiBold"
            color={theme.text.neutral.brand}
            variant="xs">
            {t('general.reply')}
          </Typography>
        </Pressable>
      </View>
      <ContentActionsDialog
        isThread
        isVisible={showMenuOptions}
        isOwner={isOwner}
        contentType={ContentType.COMMENT}
        onHide={onHideDialog}
        comment={item}
        acknowledgementId={acknowledgementId}
      />
    </>
  );
}

export default CommentItem;