"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _styles = require("./styles");
var _reactNativeSvg = require("react-native-svg");
var _xml = require("../../../../../../core/assets/icons/xml");
var _comment = require("../../../../../../core/legacy/comment");
var _useAuth = _interopRequireDefault(require("../../../../../../core/hooks/useAuth"));
var _useTimeDifference = require("../../../../../hooks/useTimeDifference");
var _feed = require("../../../../../../core/legacy/feed");
var _EditCommentModal = _interopRequireDefault(require("../../../../../components/legacy/EditCommentModal"));
var _reactNativePaper = require("react-native-paper");
var _ModeratorBadgeElement = _interopRequireDefault(require("../../../../../elements/ModeratorBadgeElement/ModeratorBadgeElement"));
var _BrandBadge = require("../../../../../elements/BrandBadge");
var _enums = require("../../../../../enums");
var _List = _interopRequireDefault(require("../../../../reaction/components/List"));
var _RenderTextWithMention = _interopRequireDefault(require("../../../../../components/RenderTextWithMention/RenderTextWithMention"));
var _uiSlice = _interopRequireDefault(require("../../../../../../core/stores/slices/uiSlice"));
var _store = require("../../../../../../core/stores/store");
var _native = require("@react-navigation/native");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ReplyCommentList = ({
  commentDetail,
  onDelete,
  commentId
}) => {
  const {
    data,
    user,
    createdAt,
    reactions,
    myReactions,
    childrenComment,
    editedAt,
    mentionPosition,
    targetType,
    targetId
  } = commentDetail;
  const theme = (0, _reactNativePaper.useTheme)();
  const styles = (0, _styles.useStyles)();
  const dispatch = (0, _store.useUIKitDispatch)();
  const {
    showToastMessage
  } = _uiSlice.default.actions;
  const timeDifference = (0, _useTimeDifference.useTimeDifference)(createdAt);
  const [isLike, setIsLike] = (0, _react.useState)(myReactions ? myReactions.includes('like') : false);
  const [likeReaction, setLikeReaction] = (0, _react.useState)(reactions.like ? reactions.like : 0);
  const {
    client,
    apiRegion
  } = (0, _useAuth.default)();
  const [textComment, setTextComment] = (0, _react.useState)(data.text);
  const [isVisible, setIsVisible] = (0, _react.useState)(false);
  const [isReactionListVisible, setIsReactionListVisible] = (0, _react.useState)(false);
  const [isReportByMe, setIsReportByMe] = (0, _react.useState)(false);
  const [editCommentModal, setEditCommentModal] = (0, _react.useState)(false);
  const [isEditComment, setIsEditComment] = (0, _react.useState)(false);
  const slideAnimation = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const navigation = (0, _native.useNavigation)();
  const openModal = () => {
    setIsVisible(true);
  };
  const closeModal = () => {
    _reactNative.Animated.timing(slideAnimation, {
      toValue: 0,
      duration: 100,
      useNativeDriver: true
    }).start(() => setIsVisible(false));
  };
  const checkIsReport = async () => {
    const isReport = await (0, _feed.isReportTarget)('comment', commentId);
    if (isReport) {
      setIsReportByMe(true);
    }
  };
  (0, _react.useEffect)(() => {
    checkIsReport();
  }, [childrenComment]);
  const addReactionToComment = async () => {
    if (isLike && likeReaction) {
      setLikeReaction(likeReaction - 1);
      setIsLike(false);
      await (0, _comment.removeCommentReaction)(commentId, 'like');
    } else {
      setIsLike(true);
      setLikeReaction(likeReaction + 1);
      await (0, _comment.addCommentReaction)(commentId, 'like');
    }
  };
  const deleteReplyComment = () => {
    _reactNative.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 (0, _feed.unReportTargetById)('comment', commentId);
      setIsVisible(false);
      setIsReportByMe(false);
      if (unReportPost) {
        dispatch(showToastMessage({
          toastMessage: 'Comment unreported',
          isSuccessToast: true
        }));
      }
    } else {
      const reportPost = await (0, _feed.reportTargetById)('comment', commentId);
      setIsVisible(false);
      setIsReportByMe(true);
      if (reportPost) {
        dispatch(showToastMessage({
          toastMessage: 'Comment reported',
          isSuccessToast: 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);
  };
  const onPressCommentReaction = () => {
    setIsReactionListVisible(true);
  };
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    key: commentId,
    style: styles.replyCommentWrap
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.replyHeaderSection
  }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: () => (user === null || user === void 0 ? void 0 : user.userId) && navigation.navigate('UserProfile', {
      userId: (user === null || user === void 0 ? void 0 : user.userId) || ''
    })
  }, user !== null && user !== void 0 && user.avatarFileId ? /*#__PURE__*/React.createElement(_reactNative.Image, {
    style: styles.avatar,
    source: {
      uri: user !== null && user !== void 0 && user.avatarCustomUrl ? user === null || user === void 0 ? void 0 : user.avatarCustomUrl : `https://api.${apiRegion}.amity.co/api/v3/files/${user === null || user === void 0 ? void 0 : user.avatarFileId}/download`
    }
  }) : /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.avatar
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: _xml.personXml,
    width: "20",
    height: "16"
  }))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.rightSection
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.commentBubble
  }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: () => (user === null || user === void 0 ? void 0 : user.userId) && navigation.navigate('UserProfile', {
      userId: (user === null || user === void 0 ? void 0 : user.userId) || ''
    })
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.displayNameRow
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.headerText,
    numberOfLines: 1,
    ellipsizeMode: "tail"
  }, user === null || user === void 0 ? void 0 : user.displayName), (user === null || user === void 0 ? void 0 : user.isBrand) && /*#__PURE__*/React.createElement(_BrandBadge.BrandBadge, {
    width: 16,
    height: 16
  }))), targetType === 'community' && targetId &&
  /*#__PURE__*/
  // eslint-disable-next-line react-native/no-inline-styles
  React.createElement(_reactNative.View, {
    style: {
      marginVertical: 6
    }
  }, /*#__PURE__*/React.createElement(_ModeratorBadgeElement.default, {
    communityId: targetId,
    userId: user === null || user === void 0 ? void 0 : user.userId,
    pageID: _enums.PageID.WildCardPage,
    componentID: _enums.ComponentID.post_content
  })), textComment && /*#__PURE__*/React.createElement(_RenderTextWithMention.default, {
    textPost: textComment,
    mentionPositionArr: mentionPosition ?? []
  })
  // <LinkPreview
  //   text={textComment}
  //   mentionPositionArr={commentMentionPosition}
  // />
  ), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.actionSection
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.rowContainer
  }, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.timeRow
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.headerTextTime
  }, timeDifference), (editedAt !== createdAt || isEditComment) && /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.headerTextTime
  }, " (edited)")), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: () => addReactionToComment(),
    style: styles.likeBtn
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: isLike ? styles.likedText : styles.btnText
  }, !isLike ? 'Like' : 'Liked')), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: openModal,
    style: styles.threeDots
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.threeDots)(theme.colors.base),
    width: "20",
    height: "16"
  }))), likeReaction > 0 && /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: onPressCommentReaction,
    style: styles.likeBtn
  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.btnText
  }, likeReaction), /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml
  // eslint-disable-next-line react-native/no-inline-styles
  , {
    style: {
      marginLeft: 4
    },
    xml: _xml.likeCircle,
    width: "20",
    height: "16"
  }))))), /*#__PURE__*/React.createElement(_reactNative.Modal, {
    animationType: "fade",
    transparent: true,
    visible: isVisible,
    onRequestClose: closeModal
  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
    onPress: closeModal,
    style: styles.modalContainer
  }, /*#__PURE__*/React.createElement(_reactNative.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(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: openEditCommentModal,
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.editIcon)(theme.colors.base),
    width: "20",
    height: "20"
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.deleteText
  }, " Edit reply")), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: deleteReplyComment,
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.storyDraftDeletHyperLink)(),
    width: "20",
    height: "20"
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.deleteText
  }, " Delete reply"))) : /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
    onPress: reportCommentObject,
    style: styles.modalRow
  }, /*#__PURE__*/React.createElement(_reactNativeSvg.SvgXml, {
    xml: (0, _xml.reportOutLine)(theme.colors.base),
    width: "20",
    height: "20"
  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
    style: styles.deleteText
  }, isReportByMe ? 'Unreport reply' : 'Report reply'))))), /*#__PURE__*/React.createElement(_EditCommentModal.default, {
    visible: editCommentModal,
    commentDetail: commentDetail,
    onFinishEdit: onEditComment,
    onClose: onCloseEditCommentModal
  }), isReactionListVisible && /*#__PURE__*/React.createElement(_List.default, {
    referenceId: commentId,
    referenceType: "comment",
    isModalVisible: isReactionListVisible,
    onCloseModal: () => setIsReactionListVisible(false)
  }));
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(ReplyCommentList);
//# sourceMappingURL=index.js.map