"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _Button = _interopRequireDefault(require("../Button"));
var _Translate = _interopRequireDefault(require("../Translate"));
var _Editor = _interopRequireDefault(require("./Editor"));
var _enUS = _interopRequireDefault(require("./locale/en-US"));
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

/**
 * This component allows users to edit a short text "in place" — in other words, straight in the interface, without
 * opening additional dialog windows. If a text is large enough that it doesn't fit on a single line, you should
 * give users a different way of editing the text.
 * @since 1.8.3
 */
const InPlaceEdit = _ref => {
  let {
    baseClassName = `${_constants.CLS_PREFIX}in-place-edit`,
    className,
    onChange,
    value,
    ...props
  } = _ref;
  const [isEditing, setIsEditing] = (0, _react.useState)(false);
  const toggleEditing = () => setIsEditing(current => !current);
  const handleSave = newValue => {
    onChange?.(newValue);
    toggleEditing();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames.default)(baseClassName, className),
    ...props,
    children: [!isEditing && value, !isEditing && onChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
      ghost: true,
      className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
      onClick: toggleEditing,
      icon: {
        name: 'pencil',
        className: `${baseClassName}__control-button-icon`
      },
      tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
        content: "InPlaceEdit.editButtonHint",
        fallback: _enUS.default.editButtonHint
      })
    }), isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Editor.default, {
      baseClassName: baseClassName,
      value: `${value}`,
      onSave: handleSave,
      onCancel: toggleEditing
    })]
  });
};
var _default = exports.default = InPlaceEdit;