// Copyright 1999-2025. WebPros International GmbH. All rights reserved.

import { useState } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import Button from '../Button';
import Translate from '../Translate';
import Editor from './Editor';
import locale from './locale/en-US';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 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 = `${CLS_PREFIX}in-place-edit`,
    className,
    onChange,
    value,
    ...props
  } = _ref;
  const [isEditing, setIsEditing] = useState(false);
  const toggleEditing = () => setIsEditing(current => !current);
  const handleSave = newValue => {
    onChange?.(newValue);
    toggleEditing();
  };
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(baseClassName, className),
    ...props,
    children: [!isEditing && value, !isEditing && onChange && /*#__PURE__*/_jsx(Button, {
      ghost: true,
      className: classNames(`${baseClassName}__control-button`, `${baseClassName}__control-button--edit`),
      onClick: toggleEditing,
      icon: {
        name: 'pencil',
        className: `${baseClassName}__control-button-icon`
      },
      tooltip: /*#__PURE__*/_jsx(Translate, {
        content: "InPlaceEdit.editButtonHint",
        fallback: locale.editButtonHint
      })
    }), isEditing && /*#__PURE__*/_jsx(Editor, {
      baseClassName: baseClassName,
      value: `${value}`,
      onSave: handleSave,
      onCancel: toggleEditing
    })]
  });
};
export default InPlaceEdit;