// packages/block-editor/src/components/url-input/button.js
import { __ } from "@wordpress/i18n";
import { useReducer } from "@wordpress/element";
import {
  Button,
  __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper
} from "@wordpress/components";
import { link, keyboardReturn, arrowLeft } from "@wordpress/icons";
import URLInput from "./";
import { jsx, jsxs } from "react/jsx-runtime";
function URLInputButton({ url, onChange }) {
  const [expanded, toggleExpanded] = useReducer(
    (isExpanded) => !isExpanded,
    false
  );
  const submitLink = (event) => {
    event.preventDefault();
    toggleExpanded();
  };
  return /* @__PURE__ */ jsxs("div", { className: "block-editor-url-input__button", children: [
    /* @__PURE__ */ jsx(
      Button,
      {
        size: "compact",
        icon: link,
        label: url ? __("Edit link") : __("Insert link"),
        onClick: toggleExpanded,
        className: "components-toolbar__control",
        isPressed: !!url
      }
    ),
    expanded && /* @__PURE__ */ jsx(
      "form",
      {
        className: "block-editor-url-input__button-modal",
        onSubmit: submitLink,
        children: /* @__PURE__ */ jsxs("div", { className: "block-editor-url-input__button-modal-line", children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              className: "block-editor-url-input__back",
              icon: arrowLeft,
              label: __("Close"),
              onClick: toggleExpanded
            }
          ),
          /* @__PURE__ */ jsx(
            URLInput,
            {
              value: url || "",
              onChange,
              suffix: /* @__PURE__ */ jsx(InputControlSuffixWrapper, { variant: "control", children: /* @__PURE__ */ jsx(
                Button,
                {
                  size: "small",
                  icon: keyboardReturn,
                  label: __("Submit"),
                  type: "submit"
                }
              ) })
            }
          )
        ] })
      }
    )
  ] });
}
var button_default = URLInputButton;
export {
  button_default as default
};
//# sourceMappingURL=button.js.map
