import PropTypes from "prop-types";
import React from "react";
import { REVEAL_SPOILER_BTN, REVEAL_SPOILER_CONTENT } from "./../../_shared/data-hooks.js";
import { EditableTextInput as EditableInputWrapper } from "./editable-input-wrapper.js";
class RevealButton extends React.Component {
  constructor() {
    super(...arguments);
    this.onChange = (e) => {
      const oldValue = this.props.value;
      const newValue = e.target.value;
      if (e.target.scrollWidth < 229 || oldValue.length > newValue.length) {
        this.props.onChange(newValue);
      }
    };
  }
  render() {
    const { className, onRevealSpoiler, setInPluginEditingMode, setFocusToBlock, value, onChange } = this.props;
    const InputComponent = /* @__PURE__ */ React.createElement("input", { size: value.length + 1, "data-hook": REVEAL_SPOILER_CONTENT, type: "text" });
    return /* @__PURE__ */ React.createElement(
      "button",
      {
        className,
        onClick: onRevealSpoiler,
        "data-hook": REVEAL_SPOILER_BTN,
        type: "button"
      },
      onChange ? /* @__PURE__ */ React.createElement(
        EditableInputWrapper,
        {
          InputComponent,
          value,
          onChange: this.onChange,
          setInPluginEditingMode,
          setFocusToBlock
        }
      ) : /* @__PURE__ */ React.createElement("span", { dir: "auto" }, value)
    );
  }
}
RevealButton.propTypes = {
  className: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  setFocusToBlock: PropTypes.func,
  setInPluginEditingMode: PropTypes.func,
  onRevealSpoiler: PropTypes.func
};
export {
  RevealButton
};
//# sourceMappingURL=reveal-button.js.map
