"use strict";

exports.__esModule = true;
exports.default = CommentObject;

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

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

var _Widget = _interopRequireDefault(require("../Widget"));

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

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

var _Bullet = _interopRequireDefault(require("../../shared/Bullet"));

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

var _Votes = _interopRequireDefault(require("./Votes"));

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

var _Skeleton = _interopRequireDefault(require("./Skeleton"));

var _lab = require("@mui/lab");

var _Icon = _interopRequireDefault(require("@mui/material/Icon"));

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

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

var _ContributionActionsMenu = _interopRequireDefault(require("../../shared/ContributionActionsMenu"));

var _DateTimeAgo = _interopRequireDefault(require("../../shared/DateTimeAgo"));

var _contribution = require("../../utils/contribution");

var _notistack = require("notistack");

var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));

var _CommentsObject = _interopRequireDefault(require("../CommentsObject"));

var _BaseItem = _interopRequireDefault(require("../../shared/BaseItem"));

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

const _excluded = ["id", "className", "commentObjectId", "commentObject", "feedObjectId", "feedObject", "feedObjectType", "commentReply", "onOpenReply", "onDelete", "onVote", "elevation", "CommentObjectSkeletonProps", "ReplyCommentObjectProps"];

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)({
  reply: {
    id: 'ui.commentObject.reply',
    defaultMessage: 'ui.commentObject.reply'
  },
  voteUp: {
    id: 'ui.commentObject.voteUp',
    defaultMessage: 'ui.commentObject.voteUp'
  },
  voteDown: {
    id: 'ui.commentObject.voteDown',
    defaultMessage: 'ui.commentObject.voteDown'
  }
});
const PREFIX = 'SCCommentObject';
const classes = {
  root: `${PREFIX}-root`,
  comment: `${PREFIX}-comment`,
  nestedComments: `${PREFIX}-nestedComments`,
  avatar: `${PREFIX}-avatar`,
  content: `${PREFIX}-content`,
  author: `${PREFIX}-author`,
  textContent: `${PREFIX}-text-content`,
  btnVotes: `${PREFIX}-btn-votes`,
  votes: `${PREFIX}-votes`,
  commentActionsMenu: `${PREFIX}-comment-actions-menu`,
  deleted: `${PREFIX}-deleted`,
  activityAt: `${PREFIX}-activity-at`,
  reply: `${PREFIX}-reply`,
  contentSubSection: `${PREFIX}-comment-sub-section`
};
const Root = (0, _styles.styled)(_material.Box, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  overflow: 'auto',
  width: '100%',
  '& .MuiIcon-root': {
    fontSize: '18px',
    marginBottom: '0.5px'
  },
  [`& .${classes.comment}`]: {
    paddingBottom: 0,
    '& > div': {
      alignItems: 'flex-start'
    }
  },
  [`& .${classes.nestedComments}`]: {
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: 55,
    '& ul.MuiList-root': {
      paddingTop: 0,
      paddingBottom: 0,
      width: '100%',
      '& li.MuiListItem-root': {
        paddingTop: 5
      }
    }
  },
  [`& .${classes.content}`]: {
    position: 'relative',
    display: 'flex',
    '& .MuiCardContent-root': {
      padding: '7px 13px 7px 13px',
      flexGrow: 1
    }
  },
  [`& .${classes.avatar}`]: {
    top: theme.spacing()
  },
  [`& .${classes.author}`]: {
    textDecoration: 'none',
    color: theme.palette.text.primary,
    '& span': {
      fontWeight: '600'
    }
  },
  [`& .${classes.textContent}`]: {
    '& a': {
      color: theme.palette.text.primary
    },
    '& p': {
      marginBlockStart: '0.3em',
      marginBlockEnd: '0.3em'
    }
  },
  [`& .${classes.commentActionsMenu}`]: {
    alignItems: 'flexStart'
  },
  [`& .${classes.deleted}`]: {
    opacity: 0.3
  },
  [`& .${classes.contentSubSection}`]: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    color: theme.palette.text.secondary
  },
  [`& .${classes.activityAt}`]: {
    display: 'flex',
    textDecoration: 'none',
    color: 'inherit'
  },
  [`& .${classes.reply}`]: {
    textTransform: 'capitalize',
    textDecoration: 'underline',
    textDecorationStyle: 'dotted'
  }
}));

/**
 *> API documentation for the Community-UI Comment Object component. Learn about the available props and the CSS API.

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCCommentObject-root|Styles applied to the root element.|
 |comment|.SCCommentObject-comment|Styles applied to comment element.|
 |nestedComments|.SCCommentObject-nestedComments|Styles applied to nested comments element wrapper.|
 |avatar|.SCCommentObject-avatar|Styles applied to the avatar element.|
 |author|.SCCommentObject-author|Styles applied to the author section.|
 |content|.SCCommentObject-content|Styles applied to content section.|
 |textContent|.SCCommentObject-text-content|Styles applied to text content section.|
 |btnVotes|.SCCommentObject-btn-votes|Styles applied to the vote button element.|
 |votes|.SCCommentObject-votes|Styles applied to the votes section.|
 |commentActionsMenu|.SCCommentObject-comment-actions-menu|Styles applied to comment action menu element.|
 |deleted|.SCCommentObject-deleted|Styles applied to tdeleted element.|
 |activityAt|.SCCommentObject-activity-at|Styles applied to activity at section.|
 |reply|.SCCommentObject-reply|Styles applied to the reply element.|
 |contentSubSection|.SCCommentObject-content-sub-section|Styles applied to the comment subsection|

 * @param inProps
 */
function CommentObject(inProps) {
  // PROPS
  const props = (0, _useThemeProps.default)({
    props: inProps,
    name: PREFIX
  });

  const {
    id = `comment_object_${props.commentObjectId ? props.commentObjectId : props.commentObject ? props.commentObject.id : ''}`,
    className,
    commentObjectId,
    commentObject,
    feedObjectId,
    feedObject,
    feedObjectType = _core.SCFeedObjectTypologyType.POST,
    commentReply,
    onOpenReply,
    onDelete,
    onVote,
    elevation = 0,
    CommentObjectSkeletonProps = {
      elevation,
      WidgetProps: {
        variant: 'outlined'
      }
    },
    ReplyCommentObjectProps = {
      elevation,
      ReplyBoxProps: {
        variant: 'outlined'
      }
    }
  } = props,
        rest = _objectWithoutPropertiesLoose(props, _excluded); // CONTEXT


  const scContext = (0, _core.useSCContext)();
  const scUserContext = (0, _react.useContext)(_core.SCUserContext);
  const scRoutingContext = (0, _core.useSCRouting)();
  const {
    enqueueSnackbar
  } = (0, _notistack.useSnackbar)();
  const intl = (0, _reactIntl.useIntl)(); // STATE

  const {
    obj,
    setObj
  } = (0, _core.useSCFetchCommentObject)({
    id: commentObjectId,
    commentObject
  });
  const [loadingVote, setLoadingVote] = (0, _react.useState)(false);
  const [replyComment, setReplyComment] = (0, _react.useState)(commentReply);
  const [isReplying, setIsReplying] = (0, _react.useState)(false);
  const [isSavingComment, setIsSavingComment] = (0, _react.useState)(false);
  const [editComment, setEditComment] = (0, _react.useState)(null);
  const commentsObject = (0, _core.useSCFetchCommentObjects)({
    id: feedObjectId,
    feedObject,
    feedObjectType,
    orderBy: _comments.SCCommentsOrderBy.ADDED_AT_DESC,
    parent: commentObject ? commentObject.id : commentObjectId
  });
  /**
   * Render added_at of the comment
   * @param comment
   */

  function renderTimeAgo(comment) {
    return /*#__PURE__*/_react.default.createElement(_core.Link, {
      to: scRoutingContext.url(_core.SCRoutes.COMMENT_ROUTE_NAME, (0, _contribution.getRouteData)(comment)),
      className: classes.activityAt
    }, /*#__PURE__*/_react.default.createElement(_DateTimeAgo.default, {
      date: comment.added_at
    }));
  }
  /**
   * Render vote action
   * @param comment
   */


  function renderActionVote(comment) {
    return /*#__PURE__*/_react.default.createElement(_lab.LoadingButton, {
      variant: 'text',
      sx: {
        minWidth: 30
      },
      onClick: () => vote(comment),
      disabled: loadingVote,
      color: "inherit"
    }, comment.voted ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
      title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: 'ui.commentObject.voteDown',
        defaultMessage: 'ui.commentObject.voteDown'
      })
    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
      fontSize: 'small',
      color: "primary"
    }, "thumb_up_alt")) : /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
      title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: 'ui.commentObject.voteUp',
        defaultMessage: 'ui.commentObject.voteUp'
      })
    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
      fontSize: 'small',
      color: "inherit"
    }, "thumb_up_off_alt")));
  }
  /**
   * Render Reply action
   * @param comment
   */


  function renderActionReply(comment) {
    return /*#__PURE__*/_react.default.createElement(_material.Button, {
      className: classes.reply,
      variant: "text",
      onClick: () => reply(comment),
      color: "inherit"
    }, intl.formatMessage(messages.reply));
  }
  /**
   * Render Votes counter
   */


  function renderVotes(comment) {
    return /*#__PURE__*/_react.default.createElement(_Votes.default, {
      commentObject: comment,
      sx: {
        display: {
          xs: 'none',
          sm: 'block'
        }
      }
    });
  }
  /**
   * Handle reply: open Editor
   * @param comment
   */


  function reply(comment) {
    if (!scUserContext.user) {
      scContext.settings.handleAnonymousAction();
    } else {
      setReplyComment(comment);
      onOpenReply && onOpenReply(comment);
    }
  }
  /**
   * Perform vote comment
   */


  const performVoteComment = (0, _react.useMemo)(() => comment => {
    return _core.http.request({
      url: _core.Endpoints.Vote.url({
        type: _core.SCCommentTypologyType,
        id: comment.id
      }),
      method: _core.Endpoints.Vote.method
    }).then(res => {
      if (res.status >= 300) {
        return Promise.reject(res);
      }

      return Promise.resolve(res.data);
    });
  }, [obj]);
  /**
   * Handle vote comment
   * @param comment
   */

  function vote(comment) {
    if (!scUserContext.user) {
      scContext.settings.handleAnonymousAction();
    } else {
      if (_core.UserUtils.isBlocked(scUserContext.user)) {
        enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
          id: "ui.common.userBlocked",
          defaultMessage: "ui.common.userBlocked"
        }), {
          variant: 'warning'
        });
      } else {
        setLoadingVote(true);
        performVoteComment(comment).then(data => {
          const newObj = obj;
          obj.voted = !obj.voted;
          obj.vote_count = obj.vote_count - (obj.voted ? -1 : 1);
          setObj(newObj);
          setLoadingVote(false);
          onVote && onVote(comment);
        }).catch(error => {
          _core.Logger.error(_Errors.SCOPE_SC_UI, error);

          enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
            id: "ui.common.error.action",
            defaultMessage: "ui.common.error.action"
          }), {
            variant: 'error'
          });
        });
      }
    }
  }
  /**
   * Perform reply
   * Comment of second level
   */


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

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


  function handleReply(comment) {
    if (_core.UserUtils.isBlocked(scUserContext.user)) {
      enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "ui.common.userBlocked",
        defaultMessage: "ui.common.userBlocked"
      }), {
        variant: 'warning'
      });
    } else {
      setIsReplying(true);
      performReply(comment).then(data => {
        setObj(Object.assign({}, obj, {
          comment_count: obj.comment_count + 1,
          latest_comments: [...obj.latest_comments, data]
        }));
        setReplyComment(null);
        setIsReplying(false);
      }).catch(error => {
        _core.Logger.error(_Errors.SCOPE_SC_UI, error);

        enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
          id: "ui.common.error.action",
          defaultMessage: "ui.common.error.action"
        }), {
          variant: 'error',
          autoHideDuration: 3000
        });
        setIsReplying(false);
      });
    }
  }
  /**
   * Handle comment delete
   */


  function handleDelete(comment) {
    if (comment.parent) {
      const _latestComment = obj.latest_comments.map(c => {
        if (c.id === comment.id) {
          c.deleted = !c.deleted;
        }

        return c;
      });

      setObj(Object.assign({}, obj, {
        latest_comments: _latestComment
      }));
    } else {
      const _comment = Object.assign({}, obj, {
        deleted: !obj.deleted
      });

      setObj(Object.assign({}, obj, {
        deleted: !obj.deleted
      }));
      onDelete && onDelete(_comment);
    }
  }
  /**
   * Handle comment delete
   */


  function handleHide(comment) {
    if (comment.parent) {
      const _latestComment = obj.latest_comments.map(c => {
        if (c.id === comment.id) {
          c.collapsed = !c.collapsed;
        }

        return c;
      });

      setObj(Object.assign({}, obj, {
        latest_comments: _latestComment
      }));
    } else {
      setObj(Object.assign({}, obj, {
        collapsed: !obj.collapsed
      }));
    }
  }
  /**
   * Handle comment restore
   */


  function handleRestore(comment) {
    if (comment.parent) {
      const _latestComment = obj.latest_comments.map(c => {
        if (c.id === comment.id) {
          c.deleted = false;
        }

        return c;
      });

      setObj(Object.assign({}, obj, {
        latest_comments: _latestComment
      }));
    } else {
      setObj(Object.assign({}, obj, {
        deleted: false
      }));
    }
  }
  /**
   * Handle edit comment
   */


  function handleEdit(comment) {
    setEditComment(comment);
  }

  function handleCancel() {
    setEditComment(null);
  }
  /**
   * Perform save/update comment
   */


  const performSave = comment => {
    return _core.http.request({
      url: _core.Endpoints.UpdateComment.url({
        id: editComment.id
      }),
      method: _core.Endpoints.UpdateComment.method,
      data: {
        text: comment
      }
    }).then(res => {
      if (res.status >= 300) {
        return Promise.reject(res);
      }

      return Promise.resolve(res.data);
    });
  };
  /**
   * Handle save comment
   */


  function handleSave(comment) {
    if (_core.UserUtils.isBlocked(scUserContext.user)) {
      enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
        id: "ui.common.userBlocked",
        defaultMessage: "ui.common.userBlocked"
      }), {
        variant: 'warning'
      });
    } else {
      setIsSavingComment(true);
      performSave(comment).then(data => {
        if (data.parent) {
          const _latestComment = obj.latest_comments.map(c => {
            if (c.id === data.id) {
              return data;
            }

            return c;
          });

          setObj(Object.assign({}, obj, {
            latest_comments: _latestComment
          }));
        } else {
          setObj(Object.assign({}, obj, {
            text: data.text,
            html: data.html,
            summary: data.summary,
            added_at: data.added_at
          }));
        }

        setEditComment(null);
        setIsSavingComment(false);
      }).catch(error => {
        _core.Logger.error(_Errors.SCOPE_SC_UI, error);

        enqueueSnackbar( /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
          id: "ui.common.error.action",
          defaultMessage: "ui.common.error.action"
        }), {
          variant: 'error'
        });
      });
    }
  }
  /**
   * Render comment & latest activities
   * @param comment
   */


  function renderComment(comment) {
    if (comment.deleted && (!scUserContext.user || scUserContext.user && (!_core.UserUtils.isStaff(scUserContext.user) || scUserContext.user.id !== comment.author.id))) {
      // render the comment if user is logged and is staff (admin, moderator)
      // or the comment author is the logged user
      return null;
    }

    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
      key: comment.id
    }, editComment && editComment.id === comment.id ? /*#__PURE__*/_react.default.createElement(_material.Box, {
      className: classes.comment
    }, /*#__PURE__*/_react.default.createElement(_ReplyComment.default, _extends({
      text: comment.html,
      autoFocus: true,
      id: `edit-${comment.id}`,
      commentObject: comment,
      onSave: handleSave,
      onCancel: handleCancel,
      readOnly: isReplying || isSavingComment,
      inline: !comment.parent
    }, ReplyCommentObjectProps))) : /*#__PURE__*/_react.default.createElement(_BaseItem.default, {
      elevation: 0,
      className: classes.comment,
      image: /*#__PURE__*/_react.default.createElement(_core.Link, {
        to: scRoutingContext.url(_core.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author)
      }, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
        alt: obj.author.username,
        variant: "circular",
        src: comment.author.avatar,
        className: classes.avatar
      })),
      disableTypography: true,
      primary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Widget.default, _extends({
        className: classes.content,
        elevation: elevation
      }, rest), /*#__PURE__*/_react.default.createElement(_material.CardContent, {
        className: (0, _classnames.default)({
          [classes.deleted]: obj && obj.deleted
        })
      }, /*#__PURE__*/_react.default.createElement(_core.Link, {
        className: classes.author,
        to: scRoutingContext.url(_core.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author)
      }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
        component: "span"
      }, comment.author.username)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
        className: classes.textContent,
        variant: "body2",
        gutterBottom: true,
        dangerouslySetInnerHTML: {
          __html: (0, _contribution.getContributionHtml)(comment, scRoutingContext.url)
        }
      })), scUserContext.user && /*#__PURE__*/_react.default.createElement(_material.Box, {
        className: classes.commentActionsMenu
      }, /*#__PURE__*/_react.default.createElement(_ContributionActionsMenu.default, {
        commentObject: comment,
        onRestoreContribution: handleRestore,
        onHideContribution: handleHide,
        onDeleteContribution: handleDelete,
        onEditContribution: handleEdit
      }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
        component: "span",
        className: classes.contentSubSection
      }, renderTimeAgo(comment), /*#__PURE__*/_react.default.createElement(_Bullet.default, null), renderActionVote(comment), /*#__PURE__*/_react.default.createElement(_Bullet.default, null), renderActionReply(comment), renderVotes(comment)))
    }), comment.comment_count > 0 && /*#__PURE__*/_react.default.createElement(_material.Box, {
      className: classes.nestedComments
    }, renderLatestComment(comment)), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && /*#__PURE__*/_react.default.createElement(_material.Box, {
      className: classes.nestedComments
    }, /*#__PURE__*/_react.default.createElement(_ReplyComment.default, _extends({
      text: replyComment.parent ? `@${replyComment.author.username}, ` : '',
      autoFocus: true,
      key: `reply-${replyComment.id}`,
      id: `reply-${replyComment.id}`,
      commentObject: replyComment,
      onReply: handleReply,
      readOnly: isReplying
    }, ReplyCommentObjectProps))));
  }
  /**
   * Render Latest Comment
   * @param comment
   */


  function renderLatestComment(comment) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Boolean(comment.comment_count) && /*#__PURE__*/_react.default.createElement(_CommentsObject.default, {
      feedObject: commentsObject.feedObject,
      feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType,
      hideAdvertising: true,
      comments: [].concat(commentsObject.comments).reverse(),
      endComments: comment.latest_comments,
      previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null,
      isLoadingPrevious: commentsObject.isLoadingNext,
      handlePrevious: commentsObject.getNextPage,
      variant: 'outlined',
      CommentComponentProps: Object.assign({
        onOpenReply: reply,
        elevation: elevation
      }, rest),
      CommentsObjectSkeletonProps: Object.assign({
        count: 1
      }, CommentObjectSkeletonProps)
    }));
  }
  /**
   * Render comments
   */


  let comment;

  if (obj) {
    comment = renderComment(obj);
  } else {
    comment = /*#__PURE__*/_react.default.createElement(_Skeleton.default, CommentObjectSkeletonProps);
  }
  /**
   * Render object
   */


  return /*#__PURE__*/_react.default.createElement(Root, {
    id: id,
    className: (0, _classnames.default)(classes.root, className)
  }, comment);
}