"use strict";

exports.__esModule = true;
exports.default = Comment;

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

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

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

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

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

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

var _feedObject = require("../../../../types/feedObject");

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

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

var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));

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

const _excluded = ["className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectTemplate", "withAction", "withAudience", "inlineAction", "onViewCommentsAction", "onCommentAction"];

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

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)({
  comments: {
    id: 'ui.feedObject.comment.comments',
    defaultMessage: 'ui.feedObject.comment.comments'
  },
  comment: {
    id: 'ui.feedObject.comment.comment',
    defaultMessage: 'ui.feedObject.comment.comment'
  }
});
const PREFIX = 'SCCommentObject';
const classes = {
  root: `${PREFIX}-root`,
  divider: `${PREFIX}-divider`,
  inline: `${PREFIX}-inline`,
  actionButton: `${PREFIX}-action-button`,
  inlineActionButton: `${PREFIX}-inline-action-button`,
  viewAudienceButton: `${PREFIX}-view-audience-button`
};
const Root = (0, _styles.styled)(_material.Box, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  flexDirection: 'column',
  [`&.${classes.inline}`]: {
    flexDirection: 'row-reverse'
  },
  [`& .${classes.inlineActionButton}`]: {
    minWidth: 30
  },
  [`& .${classes.divider}`]: {
    width: '100%',
    borderBottom: 0
  },
  [`& .${classes.viewAudienceButton}`]: {
    height: 32,
    fontSize: 15,
    textTransform: 'capitalize',
    '& p': {
      fontSize: '0.9rem'
    }
  }
}));

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

  const {
    className,
    feedObjectId,
    feedObject,
    feedObjectType = _core.SCFeedObjectTypologyType.POST,
    feedObjectTemplate = _feedObject.SCFeedObjectTemplateType,
    withAction = true,
    withAudience = true,
    inlineAction = true,
    onViewCommentsAction,
    onCommentAction
  } = props,
        rest = _objectWithoutPropertiesLoose(props, _excluded); // STATE


  const {
    obj,
    setObj
  } = (0, _core.useSCFetchFeedObject)({
    id: feedObjectId,
    feedObject,
    feedObjectType
  }); // CONTEXT

  const scRoutingContext = (0, _core.useSCRouting)(); // INTL

  const intl = (0, _reactIntl.useIntl)();
  /**
   * Renders comments counter
   * @return {JSX.Element}
   */

  function renderAudience() {
    let audience;

    if (withAudience) {
      if (!obj) {
        audience = /*#__PURE__*/_react.default.createElement(_material.Button, {
          variant: "text",
          size: "small",
          disabled: true,
          color: "inherit"
        }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
          animation: "wave",
          height: 18,
          width: 50
        }));
      } else {
        audience = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, onViewCommentsAction ? /*#__PURE__*/_react.default.createElement(_material.Button, {
          variant: "text",
          size: "small",
          onClick: onViewCommentsAction,
          color: "inherit"
        }, `${intl.formatMessage(messages.comments, {
          total: obj.comment_count
        })}`) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, feedObjectTemplate === _feedObject.SCFeedObjectTemplateType.DETAIL ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
          variant: 'body2'
        }, `${intl.formatMessage(messages.comments, {
          total: obj.comment_count
        })}`) : /*#__PURE__*/_react.default.createElement(_material.Button, {
          color: "inherit",
          variant: "text",
          size: "small",
          component: _core.Link,
          to: scRoutingContext.url((0, _contribution.getContributionRouteName)(obj), (0, _contribution.getRouteData)(obj)),
          classes: {
            root: classes.viewAudienceButton
          }
        }, `${intl.formatMessage(messages.comments, {
          total: obj.comment_count
        })}`)));
      }
    }

    return audience;
  }
  /**
   * Renders commentsCounter
   * @return {JSX.Element}
   */


  function renderCommentButton() {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withAction && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !inlineAction && withAudience && /*#__PURE__*/_react.default.createElement(_material.Divider, {
      className: classes.divider
    }), /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
      title: `${intl.formatMessage(messages.comment)}`
    }, /*#__PURE__*/_react.default.createElement(_material.Button, {
      onClick: onCommentAction,
      color: "inherit",
      classes: {
        root: (0, _classnames.default)(classes.actionButton, {
          [classes.inlineActionButton]: inlineAction
        })
      }
    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
      fontSize: 'large'
    }, "chat_bubble_outline")))));
  }
  /**
   * Renders comment action
   */


  return /*#__PURE__*/_react.default.createElement(Root, _extends({
    className: (0, _classnames.default)(classes.root, className, {
      [classes.inline]: inlineAction
    })
  }, rest), renderAudience(), renderCommentButton());
}