import { useEffect, useRef, useState } from 'react';
import { View, Text, TouchableOpacity, Image, Modal, Animated, Alert } from 'react-native';
import { useStyles } from './styles';
import { SvgXml } from 'react-native-svg';
import { editIcon, expandIcon, likedXml, likeXml, personXml, storyDraftDeletHyperLink, threeDots } from '../../../../core/assets/icons/xml';
import { addCommentReaction, removeCommentReaction } from '../../../../core/legacy/comment';
import { Pressable } from 'react-native';
import useAuth from '../../../../core/hooks/useAuth';
import { useTimeDifference } from '../../../../core/hooks/useTimeDifference';
import { isReportTarget, reportTargetById, unReportTargetById } from '../../../../core/legacy/feed';
import EditCommentModal from '../../legacy/EditCommentModal';
import { useTheme } from 'react-native-paper';
import { LinkPreview } from '../../PreviewLink';
export default function ReplyCommentList({
  commentDetail,
  onDelete,
  commentId
}) {
  const {
    data,
    user,
    createdAt,
    reactions,
    myReactions,
    childrenComment,
    editedAt,
    mentionPosition,
    childrenNumber
  } = commentDetail;
  const theme = useTheme();
  const styles = useStyles();
  const timeDifference = useTimeDifference(createdAt);
  const [isLike, setIsLike] = useState(myReactions ? myReactions.includes('like') : false);
  const [likeReaction, setLikeReaction] = useState(reactions.like ? reactions.like : 0);
  const {
    client,
    apiRegion
  } = useAuth();
  const [textComment, setTextComment] = useState(data.text);
  const [isVisible, setIsVisible] = useState(false);
  const [isReportByMe, setIsReportByMe] = useState(false);
  const [editCommentModal, setEditCommentModal] = useState(false);
  const [isEditComment, setIsEditComment] = useState(false);
  const slideAnimation = useRef(new Animated.Value(0)).current;
  const [commentMentionPosition, setCommentMentionPosition] = useState([]);
  useEffect(() => {
    if (mentionPosition) {
      setCommentMentionPosition(mentionPosition);
    }
  }, [mentionPosition]);
  const openModal = () => {
    setIsVisible(true);
  };
  const closeModal = () => {
    Animated.timing(slideAnimation, {
      toValue: 0,
      duration: 100,
      useNativeDriver: true
    }).start(() => setIsVisible(false));
  };
  const checkIsReport = async () => {
    const isReport = await isReportTarget('comment', commentId);
    if (isReport) {
      setIsReportByMe(true);
    }
  };
  useEffect(() => {
    checkIsReport();
  }, [childrenComment]);
  const addReactionToComment = async () => {
    if (isLike && likeReaction) {
      setLikeReaction(likeReaction - 1);
      setIsLike(false);
      await removeCommentReaction(commentId, 'like');
    } else {
      setIsLike(true);
      setLikeReaction(likeReaction + 1);
      await addCommentReaction(commentId, 'like');
    }
  };
  const deleteReplyComment = () => {
    Alert.alert('Delete reply', 'This reply will be permanently deleted.', [{
      text: 'Cancel',
      style: 'cancel'
    }, {
      text: 'Delete',
      style: 'destructive',
      onPress: () => onDelete && onDelete(commentId)
    }]);
    setIsVisible(false);
  };
  const reportCommentObject = async () => {
    if (isReportByMe) {
      const unReportPost = await unReportTargetById('comment', commentId);
      if (unReportPost) {
        Alert.alert('Undo Report sent');
      }
      setIsVisible(false);
      setIsReportByMe(false);
    } else {
      const reportPost = await reportTargetById('comment', commentId);
      if (reportPost) {
        Alert.alert('Report sent');
      }
      setIsVisible(false);
      setIsReportByMe(true);
    }
  };
  const modalStyle = {
    transform: [{
      translateY: slideAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [600, 0]
      })
    }]
  };
  const openEditCommentModal = () => {
    setIsVisible(false);
    setEditCommentModal(true);
  };
  const onEditComment = editText => {
    setIsEditComment(true);
    setEditCommentModal(false);
    setTextComment(editText);
  };
  const onCloseEditCommentModal = () => {
    setEditCommentModal(false);
  };
  return /*#__PURE__*/React.createElement(View, {
    key: commentId,
    style: styles.replyCommentWrap
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.replyHeaderSection
  }, user !== null && user !== void 0 && user.avatarFileId ? /*#__PURE__*/React.createElement(Image, {
    style: styles.avatar,
    source: {
      uri: `https://api.${apiRegion}.amity.co/api/v3/files/${user === null || user === void 0 ? void 0 : user.avatarFileId}/download`
    }
  }) : /*#__PURE__*/React.createElement(View, {
    style: styles.avatar
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: personXml,
    width: "20",
    height: "16"
  })), /*#__PURE__*/React.createElement(View, {
    style: styles.rightSection
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.headerRow
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.headerText
  }, user === null || user === void 0 ? void 0 : user.displayName)), /*#__PURE__*/React.createElement(View, {
    style: styles.timeRow
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.headerTextTime
  }, timeDifference), (editedAt !== createdAt || isEditComment) && /*#__PURE__*/React.createElement(Text, {
    style: styles.dot
  }, "\xB7"), (editedAt !== createdAt || isEditComment) && /*#__PURE__*/React.createElement(Text, {
    style: styles.headerTextTime
  }, "Edited")), /*#__PURE__*/React.createElement(View, {
    style: styles.commentBubble
  }, textComment && /*#__PURE__*/React.createElement(LinkPreview, {
    text: textComment,
    mentionPositionArr: commentMentionPosition
  })), /*#__PURE__*/React.createElement(View, {
    style: styles.actionSection
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => addReactionToComment(),
    style: styles.likeBtn
  }, isLike ? /*#__PURE__*/React.createElement(SvgXml, {
    xml: likedXml(theme.colors.primary),
    width: "20",
    height: "16"
  }) : /*#__PURE__*/React.createElement(SvgXml, {
    xml: likeXml,
    width: "20",
    height: "16"
  }), /*#__PURE__*/React.createElement(Text, {
    style: isLike ? styles.likedText : styles.btnText
  }, !isLike && likeReaction === 0 ? 'Like' : likeReaction)), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: openModal,
    style: styles.threeDots
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: threeDots(theme.colors.base),
    width: "20",
    height: "16"
  }))), /*#__PURE__*/React.createElement(View, null, childrenComment && childrenComment.length > 0 && /*#__PURE__*/React.createElement(Pressable, {
    style: styles.viewMoreReplyBtn
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: expandIcon
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.viewMoreText
  }, "View ", childrenNumber, " replies"))))), /*#__PURE__*/React.createElement(Modal, {
    animationType: "fade",
    transparent: true,
    visible: isVisible,
    onRequestClose: closeModal
  }, /*#__PURE__*/React.createElement(Pressable, {
    onPress: closeModal,
    style: styles.modalContainer
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.modalContent, modalStyle, (user === null || user === void 0 ? void 0 : user.userId) === client.userId && styles.twoOptions]
  }, (user === null || user === void 0 ? void 0 : user.userId) === client.userId ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: openEditCommentModal,
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: editIcon(theme.colors.base),
    width: "20",
    height: "20"
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.deleteText
  }, " Edit reply")), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: deleteReplyComment,
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(SvgXml, {
    xml: storyDraftDeletHyperLink(),
    width: "20",
    height: "20"
  }), /*#__PURE__*/React.createElement(Text, {
    style: styles.deleteText
  }, " Delete reply"))) : /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: reportCommentObject,
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.deleteText
  }, isReportByMe ? 'Undo Report' : 'Report'))))), /*#__PURE__*/React.createElement(EditCommentModal, {
    visible: editCommentModal,
    commentDetail: commentDetail,
    onFinishEdit: onEditComment,
    onClose: onCloseEditCommentModal
  }));
}
//# sourceMappingURL=index.js.map