"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function RenameFontSizeDialog({
  fontSize,
  toggleOpen,
  handleRename
}) {
  const [newName, setNewName] = (0, _element.useState)(fontSize.name);
  const handleConfirm = () => {
    // If the new name is not empty, call the handleRename function
    if (newName.trim()) {
      handleRename(newName);
    }
    toggleOpen();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
    onRequestClose: toggleOpen,
    focusOnMount: "firstContentElement",
    title: (0, _i18n.__)('Rename'),
    size: "small",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
      onSubmit: event => {
        event.preventDefault();
        handleConfirm();
        toggleOpen();
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: "3",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
          __next40pxDefaultSize: true,
          autoComplete: "off",
          value: newName,
          onChange: setNewName,
          label: (0, _i18n.__)('Name'),
          placeholder: (0, _i18n.__)('Font size preset name')
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          justify: "right",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "tertiary",
            onClick: toggleOpen,
            children: (0, _i18n.__)('Cancel')
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "primary",
            type: "submit",
            children: (0, _i18n.__)('Save')
          })]
        })]
      })
    })
  });
}
var _default = exports.default = RenameFontSizeDialog;
//# sourceMappingURL=rename-font-size-dialog.js.map