"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _Button = _interopRequireDefault(require("../Button"));
var _Input = _interopRequireDefault(require("../Input"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Translate = _interopRequireDefault(require("../Translate"));
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
 */
class InPlaceEdit extends _react.Component {
  constructor() {
    super(...arguments);
    (0, _defineProperty2.default)(this, "state", {
      editing: false,
      draft: ''
    });
    (0, _defineProperty2.default)(this, "handleEdit", () => {
      this.setState(_ref => {
        let {
          editing
        } = _ref;
        return {
          editing: !editing,
          draft: editing ? '' : this.props.value
        };
      });
    });
    (0, _defineProperty2.default)(this, "handleEditKey", event => {
      if (event.key === 'Escape') {
        this.handleEdit();
      } else if (event.key === 'Enter') {
        this.handleEditOk();
      }
    });
    (0, _defineProperty2.default)(this, "handleChange", event => {
      this.setState({
        draft: event.target.value
      });
    });
    (0, _defineProperty2.default)(this, "handleEditOk", () => {
      if (this.props.onChange) {
        this.props.onChange(this.state.draft);
      }
      this.handleEdit();
    });
  }
  render() {
    const {
      draft,
      editing
    } = this.state;
    const {
      baseClassName,
      className,
      onChange,
      value,
      ...props
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)(baseClassName, className),
      ...props,
      children: [editing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: `${baseClassName}__edit`,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
          className: `${baseClassName}__edit-input`,
          value: draft,
          onChange: this.handleChange,
          onKeyDown: this.handleEditKey,
          autoFocus: true
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: `${baseClassName}__edit-actions`,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
              content: "InPlaceEdit.okButtonHint",
              fallback: _enUS.default.okButtonHint
            }),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
              ghost: true,
              className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
              icon: "check-mark",
              onClick: this.handleEditOk
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
            title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
              content: "InPlaceEdit.cancelButtonHint",
              fallback: _enUS.default.cancelButtonHint
            }),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
              ghost: true,
              className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
              icon: "cross-mark",
              onClick: this.handleEdit
            })
          })]
        })]
      }) : value, onChange && !editing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
          content: "InPlaceEdit.editButtonHint",
          fallback: _enUS.default.editButtonHint
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
          ghost: true,
          className: (0, _classnames.default)(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
          onClick: this.handleEdit,
          icon: {
            name: 'pencil',
            className: `${baseClassName}__control-button-icon`
          }
        })
      })]
    });
  }
}
(0, _defineProperty2.default)(InPlaceEdit, "defaultProps", {
  value: null,
  onChange: null,
  className: null,
  baseClassName: `${_constants.CLS_PREFIX}in-place-edit`
});
var _default = exports.default = InPlaceEdit;