"use strict";

exports.__esModule = true;
exports.default = CommentsObject;

var _react = _interopRequireWildcard(require("react"));

var _styles = require("@mui/material/styles");

var _core = require("@selfcommunity/core");

var _reactIntl = require("react-intl");

var _Errors = require("../../constants/Errors");

var _CommentObject = _interopRequireWildcard(require("../CommentObject"));

var _ReplyComment = _interopRequireDefault(require("../CommentObject/ReplyComment"));

var _Typography = _interopRequireDefault(require("@mui/material/Typography"));

var _reactInfiniteScrollComponent = _interopRequireDefault(require("react-infinite-scroll-component"));

var _material = require("@mui/material");

var _comments = require("../../types/comments");

var _classnames = _interopRequireDefault(require("classnames"));

var _CustomAdv = _interopRequireDefault(require("../CustomAdv"));

const _excluded = ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "CommentObjectProps", "renderComment", "renderNoComments", "page", "commentsPageCount", "commentsOrderBy", "showTitle", "infiniteScrolling", "ReplyCommentObjectProps", "hidePrimaryReply", "fixedPrimaryReply", "CommentObjectSkeletonProps", "commentsLoadingBoxCount", "additionalHeaderComments", "onChangePage", "hideAdvertising"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

const messages = (0, _reactIntl.defineMessages)({
  noOtherComment: {
    id: 'ui.commentsObject.noOtherComment',
    defaultMessage: 'ui.commentsObject.noOtherComment'
  }
});
const PREFIX = 'SCCommentsObject';
const classes = {
  root: `${PREFIX}-root`,
  fixedPrimaryReply: `${PREFIX}-fixed-primary-reply`,
  fixedTopPrimaryReply: `${PREFIX}-fixed-top-primary-reply`,
  fixedBottomPrimaryReply: `${PREFIX}-fixed-bottom-primary-reply`,
  loadMoreCommentsButton: `${PREFIX}-load-more-comments-button`
};
const Root = (0, _styles.styled)(_material.Box, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  boxShadow: 'none',
  position: 'relative',
  [`& .${classes.fixedPrimaryReply}`]: {
    height: 100,
    width: '100%',
    position: 'fixed',
    background: '#FFF',
    boxSizing: 'border-box',
    transitionProperty: 'box-shadow',
    transitionDuration: '250ms',
    transitionTimingFunction: 'ease-out',
    zIndex: 1
  },
  [`& .${classes.fixedTopPrimaryReply}`]: {
    top: 0,
    boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 0px 0px, rgb(0 0 0 / 4%) 0px 2px 1px'
  },
  [`& .${classes.fixedBottomPrimaryReply}`]: {
    bottom: 0,
    boxShadow: 'rgb(0 0 0 / 5%) 0px -1px 0px 0px, rgb(0 0 0 / 4%) 0px -1px 1px'
  },
  [`& .${classes.loadMoreCommentsButton}`]: {
    textTransform: 'capitalize'
  }
}));
const PREFERENCES = [_core.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED, _core.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED];
/**
 *> API documentation for the Community-UI Comments Object component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {CommentsObject} from '@selfcommunity/ui';
 ```

 #### Component Name

 The name `SCCommentsObject` can be used when providing style overrides in the theme.

 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCCommentsObject-root|Styles applied to the root element.|
 |fixedPrimaryReply|.SCCommentsObject-fixed-primary-reply|Styles applied to the comment primary reply element.|
 |fixedTopPrimaryReply|.SCCommentsObject-fixed-top-primary-reply|Styles applied to the comment top primary reply element.|
 |fixedBottomPrimaryReply|.SCCommentsObject-fixed-bottom-primary-reply|Styles applied to the comment bottom primary reply  element.|
 * @param props
 */

function CommentsObject(props) {
  // PROPS
  const {
    id = `comments_object_${props.feedObjectType}_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`,
    className,
    feedObjectId,
    feedObject,
    feedObjectType = _core.SCFeedObjectTypologyType.POST,
    commentObjectId,
    commentObject,
    CommentObjectProps = {
      variant: 'outlined',
      elevation: 0
    },
    renderComment,
    renderNoComments,
    page = 1,
    commentsPageCount = 5,
    commentsOrderBy = _comments.CommentsOrderBy.ADDED_AT_DESC,
    showTitle = false,
    infiniteScrolling = true,
    ReplyCommentObjectProps = {
      variant: 'outlined',
      elevation: 0
    },
    hidePrimaryReply = false,
    fixedPrimaryReply = false,
    CommentObjectSkeletonProps = {
      variant: 'outlined',
      elevation: 0
    },
    commentsLoadingBoxCount = 3,
    additionalHeaderComments = [],
    onChangePage,
    hideAdvertising = false
  } = props,
        rest = _objectWithoutPropertiesLoose(props, _excluded); // CONTEXT


  const scUserContext = (0, _core.useSCUser)();
  const scPreferences = (0, _core.useSCPreferences)(); // STATE

  const [isLoading, setIsLoading] = (0, _react.useState)(true);
  const [comment, setComment] = (0, _react.useState)(null);
  const [comments, setComments] = (0, _react.useState)([]);
  const [newComments, setNewComments] = (0, _react.useState)([]);
  const [next, setNext] = (0, _react.useState)(null);
  const [previous, setPrevious] = (0, _react.useState)(null);
  const [total, setTotal] = (0, _react.useState)(null);
  const [isReplying, setIsReplying] = (0, _react.useState)(false);
  const [infiniteScrollingEnabled, setInfiniteScrollingEnabled] = (0, _react.useState)(infiniteScrolling && !(commentObject || Boolean(commentObjectId)));
  const [rootRef, setRootRef] = (0, _react.useState)(null);
  const [rootWidth, setRootWidth] = (0, _react.useState)(null); // REFS

  const isComponentMounted = (0, _react.useRef)(false); // RETRIVE OBJECTS

  const {
    obj,
    setObj
  } = (0, _core.useSCFetchFeedObject)({
    id: feedObjectId,
    feedObject,
    feedObjectType
  });
  const {
    obj: commentObj,
    setObj: setCommentObj
  } = (0, _core.useSCFetchCommentObject)({
    id: commentObjectId,
    commentObject
  });
  /**
   * Define root width to set primary reply width
   */

  const rootContainer = (0, _react.useCallback)(node => {
    if (node !== null) {
      setRootRef(node);
      setRootWidth(node.getBoundingClientRect().width);
    }
  }, []);
  /**
   * Render title
   */

  const renderTitle = (0, _react.useMemo)(() => () => {
    if (showTitle) {
      return /*#__PURE__*/_react.default.createElement(_Typography.default, {
        variant: "h6",
        gutterBottom: true
      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "ui.commentsObject.title",
        defaultMessage: "ui.commentsObject.title",
        values: {
          total: total
        }
      }));
    }

    return null;
  }, [total]);
  /**
   * Compute preferences
   */

  const preferences = (0, _react.useMemo)(() => {
    const _preferences = {};
    PREFERENCES.map(p => _preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null);
    return _preferences;
  }, [scPreferences.preferences]);
  /**
   * Render advertising above FeedObject Detail
   */

  const renderAdvertising = (0, _react.useMemo)(() => () => {
    if (obj && isComponentMounted.current && !hideAdvertising && preferences[_core.SCPreferences.ADVERTISING_CUSTOM_ADV_ENABLED] && (preferences[_core.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED] && scUserContext.user === null || !preferences[_core.SCPreferences.ADVERTISING_CUSTOM_ADV_ONLY_FOR_ANONYMOUS_USERS_ENABLED])) {
      return /*#__PURE__*/_react.default.createElement(_CustomAdv.default, _extends({
        position: _core.SCCustomAdvPosition.POSITION_IN_COMMENTS
      }, obj.categories.length && {
        categoriesId: obj.categories.map(c => c.id)
      }));
    }

    return null;
  }, [JSON.stringify(obj)]);
  /**
   * Remove commentObj or comments from newComments
   * if commentsObj.id or ids of newComments are included in commentsSet
   * @param commentsSet
   */

  const filterExtraComments = commentsSet => {
    // Filter comment
    if (comment) {
      const _isCommentDataIncluded = commentsSet.filter(c => c.id === comment.id).length > 0;

      _isCommentDataIncluded && setComment(null);
    } // Filter newComments


    if (newComments.length) {
      const commentIds = commentsSet.map(c => c.id);
      let newCommentsToRemove = [];
      newComments.map(nC => {
        if (commentIds.includes(nC.id)) {
          newCommentsToRemove.push(nC.id);
        }
      });
      setNewComments(newComments.filter(c => !newCommentsToRemove.includes(c.id)));
    }
  };
  /**
   * Get Comments
   */


  const performFetchComments = url => {
    return _core.http.request({
      url,
      method: _core.Endpoints.Comments.method
    }).then(res => {
      if (res.status >= 300) {
        return Promise.reject(res);
      }

      return Promise.resolve(res.data);
    });
  };
  /**
   * Fetch prevoius comments
   */


  function fetchPreviousComments() {
    if (obj && previous) {
      setIsLoading(true);
      performFetchComments(previous).then(res => {
        setComments([...res.results, ...comments]);
        setPrevious(res.previous);
        filterExtraComments(res.results);
        setIsLoading(false);
        onChangePage && onChangePage(comments.length / commentsPageCount + 1);
      }).catch(error => {
        _core.Logger.error(_Errors.SCOPE_SC_UI, error);
      });
    }
  }
  /**
   * Fetch next comments
   */


  function fetchNextComments() {
    if (obj) {
      const _next = next ? next : `${_core.Endpoints.Comments.url()}?${feedObjectType}=${obj.id}&limit=${commentsPageCount}&ordering=${commentsOrderBy}&offset=${page > 0 ? (page - 1) * commentsPageCount : 0}`;

      setIsLoading(true);
      performFetchComments(_next).then(res => {
        setComments(next ? [...comments, ...res.results] : res.results);
        setTotal(res.count);
        setNext(res.next);

        if (page > 1 && comments.length === 0) {
          // Save initial previous if start from a page > 1
          setPrevious(res.previous);
        }

        filterExtraComments(res.results);
        setIsLoading(false);
        onChangePage && onChangePage(comments.length / commentsPageCount + 1);
      }).catch(error => {
        _core.Logger.error(_Errors.SCOPE_SC_UI, error);
      });
    }
  }
  /**
   * Get a single comment
   */


  const performFetchComment = (0, _react.useMemo)(() => commentId => {
    return _core.http.request({
      url: _core.Endpoints.Comment.url({
        id: commentId
      }),
      method: _core.Endpoints.Comment.method
    }).then(res => {
      if (res.status >= 300) {
        return Promise.reject(res);
      }

      return Promise.resolve(res.data);
    });
  }, [obj, commentObjectId, commentObj]);
  /**
   * Fetch a single comment
   * and comment parent (if need it)
   */

  function fetchComment() {
    setIsLoading(true);

    if (commentObj) {
      if (commentObj.parent) {
        performFetchComment(commentObj.parent).then(parent => {
          const _parent = Object.assign({}, parent);

          _parent.latest_comments = [commentObj];
          setComment(_parent);
          setIsLoading(false);
        }).catch(error => {
          _core.Logger.error(_Errors.SCOPE_SC_UI, error);
        });
      } else {
        setComment(commentObj);
        setIsLoading(false);
      }
    }
  }
  /**
   * Reload comments
   */


  (0, _react.useEffect)(() => {
    if (obj && obj.id && isComponentMounted.current) {
      setNext(null);
      setComments([]);
      setNewComments([]);
      fetchNextComments();
    }
  }, [commentsPageCount, commentsOrderBy]);
  /**
   * Fetch comments only if obj change
   */

  (0, _react.useEffect)(() => {
    if (commentObjectId || commentObj) {
      fetchComment();
    } else if (obj && obj.id) {
      fetchNextComments();
    }

    isComponentMounted.current = true;
    return () => {
      isComponentMounted.current = false;
    };
  }, [obj, commentObj]);
  /**
   * Handle open reply box
   * @param comment
   */

  function openReplyBox(comment) {
    setTimeout(() => {
      const element = document.getElementById(`reply-${comment.id}`);
      element && element.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
    }, 200);
  }
  /**
   * Perform reply
   * Comment of first level
   */


  const performReply = comment => {
    return _core.http.request({
      url: _core.Endpoints.NewComment.url({}),
      method: _core.Endpoints.NewComment.method,
      data: {
        [`${feedObjectType}`]: feedObjectId,
        text: comment
      }
    }).then(res => {
      if (res.status >= 300) {
        return Promise.reject(res);
      }

      return Promise.resolve(res.data);
    });
  };
  /**
   * Handle comment of 1° level
   */


  function handleReply(content) {
    setIsReplying(true);
    performReply(content).then(c => {
      if (infiniteScrollingEnabled && (commentsOrderBy === _comments.CommentsOrderBy.ADDED_AT_ASC || previous || comment)) {
        setInfiniteScrollingEnabled(false);
      }

      setNewComments(commentsOrderBy === _comments.CommentsOrderBy.ADDED_AT_DESC ? [...[c], ...newComments] : [...newComments, ...[c]]);
      setIsReplying(false);
      setTimeout(() => {
        const element = document.getElementById(`${c.id}`);
        element && element.scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        });
      }, 100);
    }).catch(error => {
      _core.Logger.error(_Errors.SCOPE_SC_UI, error);
    });
  }
  /**
   * Render header primary reply
   */


  function renderHeadPrimaryReply() {
    if (scUserContext.user && !hidePrimaryReply && commentsOrderBy === _comments.CommentsOrderBy.ADDED_AT_DESC) {
      return /*#__PURE__*/_react.default.createElement(_material.Box, {
        className: (0, _classnames.default)({
          [classes.fixedPrimaryReply]: fixedPrimaryReply,
          [classes.fixedTopPrimaryReply]: fixedPrimaryReply
        }),
        style: {
          width: `${rootWidth}px`
        }
      }, /*#__PURE__*/_react.default.createElement(_ReplyComment.default, _extends({
        readOnly: isReplying || isLoading,
        onReply: handleReply,
        key: Number(isReplying),
        inline: true
      }, ReplyCommentObjectProps)));
    }

    return null;
  }
  /**
   * Render footer primary reply
   */


  function renderFooterPrimaryReply() {
    if (scUserContext.user && !hidePrimaryReply && commentsOrderBy === _comments.CommentsOrderBy.ADDED_AT_ASC) {
      return /*#__PURE__*/_react.default.createElement(_material.Box, {
        className: (0, _classnames.default)({
          [classes.fixedPrimaryReply]: fixedPrimaryReply,
          [classes.fixedBottomPrimaryReply]: fixedPrimaryReply
        }),
        style: {
          width: `${rootWidth}px`
        }
      }, /*#__PURE__*/_react.default.createElement(_ReplyComment.default, _extends({
        readOnly: isReplying || isLoading,
        onReply: handleReply,
        key: Number(isReplying),
        inline: true
      }, ReplyCommentObjectProps)));
    }

    return null;
  }
  /**
   * Render new comments
   */


  function renderNewComments(order) {
    if (order === commentsOrderBy) {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, newComments.map(comment => {
        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
          key: comment.id
        }, renderComment ? renderComment(comment) : /*#__PURE__*/_react.default.createElement(_CommentObject.default, _extends({
          id: comment.id,
          commentObject: comment,
          onOpenReply: openReplyBox,
          feedObject: obj,
          feedObjectType: feedObjectType,
          commentReply: commentObj
        }, CommentObjectProps)));
      }));
    }

    return null;
  }
  /**
   * Render comments
   */


  const advPosition = Math.floor(Math.random() * (Math.min(total, 5) - 1 + 1) + 1);

  let commentsRendered = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);

  if (comments.length === 0 && isLoading || !obj) {
    commentsRendered = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, [...Array(commentsLoadingBoxCount)].map((x, i) => /*#__PURE__*/_react.default.createElement(_CommentObject.CommentObjectSkeleton, _extends({
      key: i
    }, CommentObjectSkeletonProps))));
  } else if (comments.length === 0 && !comment && !isLoading) {
    commentsRendered = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderNoComments ? renderNoComments() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
      id: 'ui.commentsObject.noComments',
      defaultMessage: 'ui.commentsObject.noComments'
    })));
  } else {
    const wrapperStyles = Object.assign({}, fixedPrimaryReply ? commentsOrderBy === _comments.CommentsOrderBy.ADDED_AT_DESC ? {
      paddingTop: 100
    } : {
      paddingBottom: 100
    } : {});

    if (infiniteScrollingEnabled) {
      commentsRendered = /*#__PURE__*/_react.default.createElement(_reactInfiniteScrollComponent.default, {
        dataLength: comments.length,
        next: fetchNextComments,
        hasMore: next !== null,
        loader: /*#__PURE__*/_react.default.createElement(_CommentObject.CommentObjectSkeleton, CommentObjectSkeletonProps),
        style: wrapperStyles,
        endMessage: commentsOrderBy === _comments.CommentsOrderBy.ADDED_AT_DESC ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
          variant: "body2",
          align: "center"
        }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
          id: "ui.commentsObject.noOtherComments",
          defaultMessage: "ui.commentsObject.noOtherComments"
        })) : null
      }, previous && !isLoading && /*#__PURE__*/_react.default.createElement(_material.Button, {
        variant: "text",
        onClick: fetchPreviousComments,
        disabled: isLoading,
        color: "inherit"
      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "ui.commentsObject.loadPreviousComments",
        defaultMessage: "ui.commentsObject.loadPreviousComments"
      })), [...additionalHeaderComments, ...newComments, ...comments, ...(comment ? [comment] : [])].map((c, index) => {
        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
          key: c.id
        }, renderComment ? renderComment(c) : /*#__PURE__*/_react.default.createElement(_CommentObject.default, _extends({
          id: c.id,
          commentObject: c,
          onOpenReply: openReplyBox,
          feedObject: obj,
          feedObjectType: feedObjectType
        }, CommentObjectProps)), advPosition === index && renderAdvertising());
      }));
    } else {
      commentsRendered = /*#__PURE__*/_react.default.createElement(_material.Box, {
        style: wrapperStyles
      }, isLoading && commentObj && comments.length === 0 && /*#__PURE__*/_react.default.createElement(_CommentObject.CommentObjectSkeleton, CommentObjectSkeletonProps), renderNewComments(_comments.CommentsOrderBy.ADDED_AT_DESC), comment && comments.length === 0 && obj && obj.comment_count > 0 && !isLoading && /*#__PURE__*/_react.default.createElement(_material.Button, {
        variant: "text",
        onClick: fetchNextComments,
        disabled: isLoading,
        color: "inherit"
      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "ui.commentsObject.loadMoreComments",
        defaultMessage: "ui.commentsObject.loadMoreComments"
      })), previous && !isLoading && /*#__PURE__*/_react.default.createElement(_material.Button, {
        variant: "text",
        onClick: fetchPreviousComments,
        disabled: isLoading,
        color: "inherit"
      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "ui.commentsObject.loadPreviousComments",
        defaultMessage: "ui.commentsObject.loadPreviousComments"
      })), [...additionalHeaderComments, ...comments].map((comment, index) => {
        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
          key: comment.id
        }, renderComment ? renderComment(comment) : /*#__PURE__*/_react.default.createElement(_CommentObject.default, _extends({
          id: comment.id,
          commentObject: comment,
          onOpenReply: openReplyBox,
          feedObject: obj,
          feedObjectType: feedObjectType,
          commentReply: commentObj
        }, CommentObjectProps)), advPosition === index && renderAdvertising());
      }), Boolean(next) && !isLoading && /*#__PURE__*/_react.default.createElement(_material.Stack, {
        direction: "row",
        justifyContent: "space-between",
        alignItems: "center",
        spacing: 2
      }, /*#__PURE__*/_react.default.createElement(_material.Button, {
        variant: "text",
        onClick: fetchNextComments,
        disabled: isLoading,
        color: "inherit",
        classes: {
          root: classes.loadMoreCommentsButton
        }
      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "ui.commentsObject.loadMoreComments",
        defaultMessage: "ui.commentsObject.loadMoreComments"
      })), total && !commentObj && /*#__PURE__*/_react.default.createElement(_Typography.default, {
        variant: "body1"
      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "ui.commentsObject.numberOfComments",
        defaultMessage: "ui.commentsObject.numberOfComments",
        values: {
          loaded: comments.length,
          total: total
        }
      }))), isLoading && (!commentObj || commentObj && comments.length > 0) && /*#__PURE__*/_react.default.createElement(_CommentObject.CommentObjectSkeleton, CommentObjectSkeletonProps), renderNewComments(_comments.CommentsOrderBy.ADDED_AT_ASC), comment && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
        key: comment.id
      }, renderComment ? renderComment(comment) : /*#__PURE__*/_react.default.createElement(_CommentObject.default, _extends({
        id: comment.id,
        commentObject: comment,
        onOpenReply: openReplyBox,
        feedObject: obj,
        feedObjectType: feedObjectType,
        commentReply: commentObj
      }, CommentObjectProps))));
    }
  }
  /**
   * Renders root object
   */


  return /*#__PURE__*/_react.default.createElement(Root, _extends({
    ref: rootContainer,
    id: id,
    className: className
  }, rest), renderTitle(), renderHeadPrimaryReply(), commentsRendered, renderFooterPrimaryReply());
}