"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _react = require("react");
var _tsSdkReactNative = require("@amityco/ts-sdk-react-native");
var _CommentListItem = _interopRequireDefault(require("./CommentListItem/CommentListItem"));
var _comment = require("../../../../../core/legacy/comment");
var _enums = require("../../../../enums");
var _hooks = require("../../../../hooks");
var _native = _interopRequireWildcard(require("react-content-loader/native"));
var _useCustomRankingGlobalFeed = require("../../../../hooks/useCustomRankingGlobalFeed");
var _CommentAdComponent = _interopRequireDefault(require("../../../../components/CommentAdComponent/CommentAdComponent"));
var _usePaginator = require("../../../../hooks/usePaginator");
var _useCommentAdImpression = require("../../../../hooks/useCommentAdImpression");
var _styles = require("./styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const commentListLimit = 10;
const AmityPostCommentComponent = ({
  pageId = _enums.PageID.WildCardPage,
  postId,
  communityId,
  postType,
  disabledInteraction,
  setReplyUserName,
  setReplyCommentId,
  ListHeaderComponent
}) => {
  const componentId = _enums.ComponentID.CommentTray;
  const {
    isExcluded,
    themeStyles
  } = (0, _hooks.useAmityComponent)({
    pageId,
    componentId
  });
  const styles = (0, _styles.useStyles)();
  const onNextPageRef = (0, _react.useRef)(null);
  const [commentList, setCommentList] = (0, _react.useState)([]);
  const [isLoading, setIsLoading] = (0, _react.useState)(true);
  const {
    handleViewChange
  } = (0, _useCommentAdImpression.useCommentAdImpression)();
  const {
    itemWithAds
  } = (0, _usePaginator.usePaginatorApi)({
    items: commentList,
    isLoading,
    placement: 'comment',
    communityId,
    pageSize: commentListLimit,
    getItemId: item => item.commentId
  });
  (0, _react.useEffect)(() => {
    if (!postId) return () => {};
    const unsubComment = _tsSdkReactNative.CommentRepository.getComments({
      dataTypes: {
        matchType: 'any',
        values: ['text', 'image']
      },
      referenceId: postId,
      referenceType: postType,
      limit: commentListLimit
    }, ({
      loading,
      data,
      hasNextPage,
      onNextPage
    }) => {
      if (!loading) {
        data && data.length > 0 && queryComment(data);
        onNextPageRef.current = hasNextPage ? onNextPage : null;
        setTimeout(() => {
          setIsLoading(false);
        }, 1000);
      }
    });
    return () => {
      setCommentList([]);
      unsubComment();
    };
  }, [postId, postType]);
  const queryComment = comments => {
    const formattedCommentList = comments.map(item => {
      var _item$creator, _item$creator2, _item$creator3, _item$creator4, _item$creator5, _item$metadata;
      const formattedUserObject = {
        userId: (_item$creator = item.creator) === null || _item$creator === void 0 ? void 0 : _item$creator.userId,
        displayName: (_item$creator2 = item.creator) === null || _item$creator2 === void 0 ? void 0 : _item$creator2.displayName,
        avatarFileId: (_item$creator3 = item.creator) === null || _item$creator3 === void 0 ? void 0 : _item$creator3.avatarFileId,
        avatarCustomUrl: (_item$creator4 = item.creator) === null || _item$creator4 === void 0 ? void 0 : _item$creator4.avatarCustomUrl,
        isBrand: (_item$creator5 = item.creator) === null || _item$creator5 === void 0 ? void 0 : _item$creator5.isBrand
      };
      return {
        targetType: item.targetType,
        targetId: item.targetId,
        commentId: item.commentId,
        data: item.data,
        dataType: (item === null || item === void 0 ? void 0 : item.dataType) || 'text',
        myReactions: item.myReactions,
        reactions: item.reactions,
        user: formattedUserObject,
        updatedAt: item.updatedAt,
        editedAt: item.editedAt,
        createdAt: item.createdAt,
        childrenComment: item.children,
        childrenNumber: item.childrenNumber,
        referenceId: item.referenceId,
        mentionPosition: (item === null || item === void 0 || (_item$metadata = item.metadata) === null || _item$metadata === void 0 ? void 0 : _item$metadata.mentioned) ?? []
      };
    });
    setCommentList([...formattedCommentList]);
  };
  const onDeleteComment = (0, _react.useCallback)(async commentId => {
    const isDeleted = await (0, _comment.deleteCommentById)(commentId);
    if (isDeleted) {
      const prevCommentList = [...commentList];
      const updatedCommentList = prevCommentList.filter(item => item.commentId !== commentId);
      setCommentList(updatedCommentList);
    }
  }, [commentList]);
  const handleClickReply = (0, _react.useCallback)((user, commentId) => {
    setReplyUserName(user.displayName);
    setReplyCommentId(commentId);
  }, [setReplyCommentId, setReplyUserName]);
  const renderCommentListItem = (0, _react.useCallback)(({
    item
  }) => {
    if (isLoading) {
      return /*#__PURE__*/React.createElement(_native.default, {
        height: 100,
        speed: 1,
        width: 300,
        backgroundColor: themeStyles.colors.baseShade4,
        foregroundColor: themeStyles.colors.baseShade2,
        viewBox: "0 0 300 70"
      }, /*#__PURE__*/React.createElement(_native.Circle, {
        cx: "24",
        cy: "24",
        r: "12"
      }), /*#__PURE__*/React.createElement(_native.Rect, {
        x: "50",
        y: "12",
        rx: "5",
        ry: "5",
        width: 220,
        height: 50
      }), /*#__PURE__*/React.createElement(_native.Rect, {
        x: "50",
        y: "74",
        rx: "5",
        ry: "5",
        width: 150,
        height: 8
      }));
    }
    if ((0, _useCustomRankingGlobalFeed.isAmityAd)(item)) {
      return /*#__PURE__*/React.createElement(_CommentAdComponent.default, {
        ad: item,
        pageId: pageId
      });
    }
    return /*#__PURE__*/React.createElement(_CommentListItem.default, {
      onDelete: onDeleteComment,
      commentDetail: item,
      onClickReply: handleClickReply,
      postType: postType,
      disabledInteraction: disabledInteraction
    });
  }, [disabledInteraction, handleClickReply, isLoading, onDeleteComment, postType, themeStyles.colors.baseShade2, themeStyles.colors.baseShade4, pageId]);
  if (isExcluded) return null;
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.commentListContainer
  }, /*#__PURE__*/React.createElement(_reactNative.FlatList, {
    ListHeaderComponent: ListHeaderComponent,
    keyboardShouldPersistTaps: "handled",
    data: itemWithAds,
    renderItem: renderCommentListItem,
    keyExtractor: (item, index) => ((0, _useCustomRankingGlobalFeed.isAmityAd)(item) ? item.adId : item.commentId) + `_${index}`,
    onEndReachedThreshold: 0.8,
    viewabilityConfig: {
      viewAreaCoveragePercentThreshold: 60
    },
    onEndReached: () => {
      onNextPageRef.current && onNextPageRef.current();
    },
    onViewableItemsChanged: handleViewChange
  }));
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(AmityPostCommentComponent);
//# sourceMappingURL=PostComment.js.map