/**
 * WordPress dependencies
 */
import { useState } from '@wordpress/element';
import { __experimentalHStack as HStack, Button, TextareaControl } from '@wordpress/components';
import { _x, __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { sanitizeCommentString } from './utils';

/**
 * EditComment component.
 *
 * @param {Object}   props                  - The component props.
 * @param {Function} props.onSubmit         - The function to call when updating the comment.
 * @param {Function} props.onCancel         - The function to call when canceling the comment update.
 * @param {Object}   props.thread           - The comment thread object.
 * @param {string}   props.submitButtonText - The text to display on the submit button.
 * @return {React.ReactNode} The CommentForm component.
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function CommentForm({
  onSubmit,
  onCancel,
  thread,
  submitButtonText
}) {
  var _thread$content$raw;
  const [inputComment, setInputComment] = useState((_thread$content$raw = thread?.content?.raw) !== null && _thread$content$raw !== void 0 ? _thread$content$raw : '');
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(TextareaControl, {
      __next40pxDefaultSize: true,
      __nextHasNoMarginBottom: true,
      value: inputComment !== null && inputComment !== void 0 ? inputComment : '',
      onChange: setInputComment,
      label: __('Comment'),
      hideLabelFromVision: true
    }), /*#__PURE__*/_jsxs(HStack, {
      alignment: "left",
      spacing: "3",
      justify: "flex-start",
      children: [/*#__PURE__*/_jsx(Button, {
        __next40pxDefaultSize: true,
        accessibleWhenDisabled: true,
        variant: "primary",
        onClick: () => {
          onSubmit(inputComment);
          setInputComment('');
        },
        disabled: 0 === sanitizeCommentString(inputComment).length,
        text: submitButtonText
      }), /*#__PURE__*/_jsx(Button, {
        __next40pxDefaultSize: true,
        variant: "tertiary",
        onClick: onCancel,
        text: _x('Cancel', 'Cancel comment button')
      })]
    })]
  });
}
export default CommentForm;
//# sourceMappingURL=comment-form.js.map