"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Comments = Comments;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _commentAuthorInfo = _interopRequireDefault(require("./comment-author-info"));
var _commentForm = _interopRequireDefault(require("./comment-form"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Renders the Comments component.
 *
 * @param {Object}   props                     - The component props.
 * @param {Array}    props.threads             - The array of comment threads.
 * @param {Function} props.onEditComment       - The function to handle comment editing.
 * @param {Function} props.onAddReply          - The function to add a reply to a comment.
 * @param {Function} props.onCommentDelete     - The function to delete a comment.
 * @param {Function} props.onCommentResolve    - The function to mark a comment as resolved.
 * @param {boolean}  props.showCommentBoard    - Whether to show the comment board.
 * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
 * @return {React.ReactNode} The rendered Comments component.
 */
function Comments({
  threads,
  onEditComment,
  onAddReply,
  onCommentDelete,
  onCommentResolve,
  showCommentBoard,
  setShowCommentBoard
}) {
  const {
    blockCommentId
  } = (0, _data.useSelect)(select => {
    const {
      getBlockAttributes,
      getSelectedBlockClientId
    } = select(_blockEditor.store);
    const _clientId = getSelectedBlockClientId();
    return {
      blockCommentId: _clientId ? getBlockAttributes(_clientId)?.blockCommentId : null
    };
  }, []);
  const [focusThread, setFocusThread] = (0, _element.useState)(showCommentBoard && blockCommentId ? blockCommentId : null);
  const clearThreadFocus = () => {
    setFocusThread(null);
    setShowCommentBoard(false);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [
    // If there are no comments, show a message indicating no comments are available.
    (!Array.isArray(threads) || threads.length === 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
      alignment: "left",
      className: "editor-collab-sidebar-panel__thread",
      justify: "flex-start",
      spacing: "3",
      children:
      // translators: message displayed when there are no comments available
      (0, _i18n.__)('No comments available')
    }), Array.isArray(threads) && threads.length > 0 && threads.map(thread => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
      className: (0, _clsx.default)('editor-collab-sidebar-panel__thread', {
        'editor-collab-sidebar-panel__active-thread': blockCommentId && blockCommentId === thread.id,
        'editor-collab-sidebar-panel__focus-thread': focusThread && focusThread === thread.id
      }),
      id: thread.id,
      spacing: "3",
      onClick: () => setFocusThread(thread.id),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Thread, {
        thread: thread,
        onAddReply: onAddReply,
        onCommentDelete: onCommentDelete,
        onCommentResolve: onCommentResolve,
        onEditComment: onEditComment,
        isFocused: focusThread === thread.id,
        clearThreadFocus: clearThreadFocus
      })
    }, thread.id))]
  });
}
function Thread({
  thread,
  onEditComment,
  onAddReply,
  onCommentDelete,
  onCommentResolve,
  isFocused,
  clearThreadFocus
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
      thread: thread,
      onResolve: onCommentResolve,
      onEdit: onEditComment,
      onDelete: onCommentDelete,
      status: thread.status
    }), 0 < thread?.reply?.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [!isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
        className: "editor-collab-sidebar-panel__show-more-reply",
        children: (0, _i18n.sprintf)(
        // translators: %s: number of replies.
        (0, _i18n._x)('%s more replies..', 'Show replies button'), thread?.reply?.length)
      }), isFocused && thread.reply.map(reply => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        className: "editor-collab-sidebar-panel__child-thread",
        id: reply.id,
        spacing: "2",
        children: ['approved' !== thread.status && /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
          thread: reply,
          onEdit: onEditComment,
          onDelete: onCommentDelete
        }), 'approved' === thread.status && /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
          thread: reply
        })]
      }, reply.id))]
    }), 'approved' !== thread.status && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      className: "editor-collab-sidebar-panel__child-thread",
      spacing: "2",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
        alignment: "left",
        spacing: "3",
        justify: "flex-start",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {})
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
        spacing: "3",
        className: "editor-collab-sidebar-panel__comment-field",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
          onSubmit: inputComment => {
            onAddReply(inputComment, thread.id);
          },
          onCancel: event => {
            event.stopPropagation(); // Prevent the parent onClick from being triggered
            clearThreadFocus();
          },
          submitButtonText: (0, _i18n._x)('Reply', 'Add reply comment')
        })
      })]
    })]
  });
}
const CommentBoard = ({
  thread,
  onResolve,
  onEdit,
  onDelete,
  status
}) => {
  const [actionState, setActionState] = (0, _element.useState)(false);
  const [showConfirmDialog, setShowConfirmDialog] = (0, _element.useState)(false);
  const handleConfirmDelete = () => {
    onDelete(thread.id);
    setActionState(false);
    setShowConfirmDialog(false);
  };
  const handleConfirmResolve = () => {
    onResolve(thread.id);
    setActionState(false);
    setShowConfirmDialog(false);
  };
  const handleCancel = () => {
    setActionState(false);
    setShowConfirmDialog(false);
  };
  const actions = [onEdit && {
    title: (0, _i18n._x)('Edit', 'Edit comment'),
    onClick: () => {
      setActionState('edit');
    }
  }, onDelete && {
    title: (0, _i18n._x)('Delete', 'Delete comment'),
    onClick: () => {
      setActionState('delete');
      setShowConfirmDialog(true);
    }
  }];
  const moreActions = actions.filter(item => item?.onClick);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      alignment: "left",
      spacing: "3",
      justify: "flex-start",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commentAuthorInfo.default, {
        avatar: thread?.author_avatar_urls?.[48],
        name: thread?.author_name,
        date: thread?.date
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
        className: "editor-collab-sidebar-panel__comment-status",
        children: [status !== 'approved' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          alignment: "right",
          justify: "flex-end",
          spacing: "0",
          children: [0 === thread?.parent && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            label: (0, _i18n._x)('Resolve', 'Mark comment as resolved'),
            __next40pxDefaultSize: true,
            icon: _icons.published,
            onClick: () => {
              setActionState('resolve');
              setShowConfirmDialog(true);
            },
            showTooltip: true
          }), 0 < moreActions.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
            icon: _icons.moreVertical,
            label: (0, _i18n._x)('Select an action', 'Select comment action'),
            className: "editor-collab-sidebar-panel__comment-dropdown-menu",
            controls: moreActions
          })]
        }), status === 'approved' &&
        /*#__PURE__*/
        // translators: tooltip for resolved comment
        (0, _jsxRuntime.jsx)(_components.Tooltip, {
          text: (0, _i18n.__)('Resolved'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
            icon: _icons.check
          })
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
      alignment: "left",
      spacing: "3",
      justify: "flex-start",
      className: "editor-collab-sidebar-panel__user-comment",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: "3",
        className: "editor-collab-sidebar-panel__comment-field",
        children: ['edit' === actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentForm.default, {
          onSubmit: value => {
            onEdit(thread.id, value);
            setActionState(false);
          },
          onCancel: () => handleCancel(),
          thread: thread,
          submitButtonText: (0, _i18n._x)('Update', 'verb')
        }), 'edit' !== actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
          children: thread?.content?.raw
        })]
      })
    }), 'resolve' === actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
      isOpen: showConfirmDialog,
      onConfirm: handleConfirmResolve,
      onCancel: handleCancel,
      confirmButtonText: "Yes",
      cancelButtonText: "No",
      children:
      // translators: message displayed when confirming an action
      (0, _i18n.__)('Are you sure you want to mark this comment as resolved?')
    }), 'delete' === actionState && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
      isOpen: showConfirmDialog,
      onConfirm: handleConfirmDelete,
      onCancel: handleCancel,
      confirmButtonText: "Yes",
      cancelButtonText: "No",
      children:
      // translators: message displayed when confirming an action
      (0, _i18n.__)('Are you sure you want to delete this comment?')
    })]
  });
};
//# sourceMappingURL=comments.js.map