// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import { useState } from 'react';
import classNames from 'classnames';
import Button from '../Button';
import Input from '../Input';
import Translate from '../Translate';
import locale from './locale/en-US';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Editor = _ref => {
  let {
    value: initialValue = '',
    onSave,
    onCancel,
    baseClassName
  } = _ref;
  const [value, setValue] = useState(initialValue);
  const handleChange = event => {
    setValue(event.target.value);
  };
  const handleSave = () => onSave(value);
  const handleInputKeyDown = event => {
    if (event.key === 'Escape') {
      onCancel();
    } else if (event.key === 'Enter') {
      handleSave();
    }
  };
  return /*#__PURE__*/_jsxs("div", {
    className: `${baseClassName}__edit`,
    children: [/*#__PURE__*/_jsx(Input, {
      className: `${baseClassName}__edit-input`,
      value: value,
      onChange: handleChange,
      onKeyDown: handleInputKeyDown,
      autoFocus: true
    }), /*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__edit-actions`,
      children: [/*#__PURE__*/_jsx(Button, {
        ghost: true,
        className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--ok`),
        icon: "check-mark",
        onClick: handleSave,
        tooltip: /*#__PURE__*/_jsx(Translate, {
          content: "InPlaceEdit.okButtonHint",
          fallback: locale.okButtonHint
        })
      }), /*#__PURE__*/_jsx(Button, {
        ghost: true,
        className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--cancel`),
        icon: "cross-mark",
        onClick: onCancel,
        tooltip: /*#__PURE__*/_jsx(Translate, {
          content: "InPlaceEdit.cancelButtonHint",
          fallback: locale.cancelButtonHint
        })
      })]
    })]
  });
};
export default Editor;