"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/url-popover/image-url-input-ui.js
var image_url_input_ui_exports = {};
__export(image_url_input_ui_exports, {
  __experimentalImageURLInputUI: () => ImageURLInputUI
});
module.exports = __toCommonJS(image_url_input_ui_exports);
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_dom = require("@wordpress/dom");
var import_components = require("@wordpress/components");
var import_icons = require("@wordpress/icons");
var import_url = require("@wordpress/url");
var import_index = __toESM(require("./index"));
var import_jsx_runtime = require("react/jsx-runtime");
var LINK_DESTINATION_NONE = "none";
var LINK_DESTINATION_CUSTOM = "custom";
var LINK_DESTINATION_MEDIA = "media";
var LINK_DESTINATION_ATTACHMENT = "attachment";
var NEW_TAB_REL = ["noreferrer", "noopener"];
var ImageURLInputUI = ({
  linkDestination,
  onChangeUrl,
  url,
  mediaType = "image",
  mediaUrl,
  mediaLink,
  linkTarget,
  linkClass,
  rel,
  showLightboxSetting,
  lightboxEnabled,
  onSetLightbox,
  resetLightbox
}) => {
  const [isOpen, setIsOpen] = (0, import_element.useState)(false);
  const [popoverAnchor, setPopoverAnchor] = (0, import_element.useState)(null);
  const openLinkUI = () => {
    setIsOpen(true);
  };
  const [isEditingLink, setIsEditingLink] = (0, import_element.useState)(false);
  const [urlInput, setUrlInput] = (0, import_element.useState)(null);
  const autocompleteRef = (0, import_element.useRef)(null);
  const wrapperRef = (0, import_element.useRef)();
  (0, import_element.useEffect)(() => {
    if (!wrapperRef.current) {
      return;
    }
    const nextFocusTarget = import_dom.focus.focusable.find(wrapperRef.current)[0] || wrapperRef.current;
    nextFocusTarget.focus();
  }, [isEditingLink, url, lightboxEnabled]);
  const startEditLink = () => {
    if (linkDestination === LINK_DESTINATION_MEDIA || linkDestination === LINK_DESTINATION_ATTACHMENT) {
      setUrlInput("");
    }
    setIsEditingLink(true);
  };
  const stopEditLink = () => {
    setIsEditingLink(false);
  };
  const closeLinkUI = () => {
    setUrlInput(null);
    stopEditLink();
    setIsOpen(false);
  };
  const getUpdatedLinkTargetSettings = (value) => {
    const newLinkTarget = value ? "_blank" : void 0;
    let updatedRel;
    if (newLinkTarget) {
      const rels = (rel ?? "").split(" ");
      NEW_TAB_REL.forEach((relVal) => {
        if (!rels.includes(relVal)) {
          rels.push(relVal);
        }
      });
      updatedRel = rels.join(" ");
    } else {
      const rels = (rel ?? "").split(" ").filter(
        (relVal) => NEW_TAB_REL.includes(relVal) === false
      );
      updatedRel = rels.length ? rels.join(" ") : void 0;
    }
    return {
      linkTarget: newLinkTarget,
      rel: updatedRel
    };
  };
  const onFocusOutside = () => {
    return (event) => {
      const autocompleteElement = autocompleteRef.current;
      if (autocompleteElement && autocompleteElement.contains(event.target)) {
        return;
      }
      setIsOpen(false);
      setUrlInput(null);
      stopEditLink();
    };
  };
  const onSubmitLinkChange = () => {
    return (event) => {
      if (urlInput) {
        const selectedDestination = getLinkDestinations().find(
          (destination) => destination.url === urlInput
        )?.linkDestination || LINK_DESTINATION_CUSTOM;
        onChangeUrl({
          href: (0, import_url.prependHTTP)(urlInput),
          linkDestination: selectedDestination,
          lightbox: { enabled: false }
        });
      }
      stopEditLink();
      setUrlInput(null);
      event.preventDefault();
    };
  };
  const onLinkRemove = () => {
    onChangeUrl({
      linkDestination: LINK_DESTINATION_NONE,
      href: ""
    });
  };
  const getLinkDestinations = () => {
    const linkDestinations = [
      {
        linkDestination: LINK_DESTINATION_MEDIA,
        title: (0, import_i18n.__)("Link to image file"),
        url: mediaType === "image" ? mediaUrl : void 0,
        icon: import_icons.image
      }
    ];
    if (mediaType === "image" && mediaLink) {
      linkDestinations.push({
        linkDestination: LINK_DESTINATION_ATTACHMENT,
        title: (0, import_i18n.__)("Link to attachment page"),
        url: mediaType === "image" ? mediaLink : void 0,
        icon: import_icons.page
      });
    }
    return linkDestinations;
  };
  const onSetHref = (value) => {
    const linkDestinations = getLinkDestinations();
    let linkDestinationInput;
    if (!value) {
      linkDestinationInput = LINK_DESTINATION_NONE;
    } else {
      linkDestinationInput = (linkDestinations.find((destination) => {
        return destination.url === value;
      }) || { linkDestination: LINK_DESTINATION_CUSTOM }).linkDestination;
    }
    onChangeUrl({
      linkDestination: linkDestinationInput,
      href: value
    });
  };
  const onSetNewTab = (value) => {
    const updatedLinkTarget = getUpdatedLinkTargetSettings(value);
    onChangeUrl(updatedLinkTarget);
  };
  const onSetLinkRel = (value) => {
    onChangeUrl({ rel: value });
  };
  const onSetLinkClass = (value) => {
    onChangeUrl({ linkClass: value });
  };
  const advancedOptions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "3", children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.ToggleControl,
      {
        __nextHasNoMarginBottom: true,
        label: (0, import_i18n.__)("Open in new tab"),
        onChange: onSetNewTab,
        checked: linkTarget === "_blank"
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.TextControl,
      {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: (0, import_i18n.__)("Link relation"),
        value: rel ?? "",
        onChange: onSetLinkRel,
        help: (0, import_element.createInterpolateElement)(
          (0, import_i18n.__)(
            "The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document."
          ),
          {
            a: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ExternalLink, { href: "https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" })
          }
        )
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.TextControl,
      {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: (0, import_i18n.__)("Link CSS class"),
        value: linkClass || "",
        onChange: onSetLinkClass
      }
    )
  ] });
  const linkEditorValue = urlInput !== null ? urlInput : url;
  const hideLightboxPanel = !lightboxEnabled || lightboxEnabled && !showLightboxSetting;
  const showLinkEditor = !linkEditorValue && hideLightboxPanel;
  const urlLabel = (getLinkDestinations().find(
    (destination) => destination.linkDestination === linkDestination
  ) || {}).title;
  const PopoverChildren = () => {
    if (lightboxEnabled && showLightboxSetting && !url && !isEditingLink) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-editor-url-popover__expand-on-click", children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.fullscreen }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text", children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)("Enlarge on click") }),
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "description", children: (0, import_i18n.__)("Scales the image with a lightbox effect") })
        ] }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.Button,
          {
            icon: import_icons.linkOff,
            label: (0, import_i18n.__)("Disable enlarge on click"),
            onClick: () => {
              onSetLightbox?.(false);
            },
            size: "compact"
          }
        )
      ] });
    } else if (!url || isEditingLink) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_index.default.LinkEditor,
        {
          className: "block-editor-format-toolbar__link-container-content",
          value: linkEditorValue,
          onChangeInputValue: setUrlInput,
          onSubmit: onSubmitLinkChange(),
          autocompleteRef
        }
      );
    } else if (url && !isEditingLink) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_index.default.LinkViewer,
          {
            className: "block-editor-format-toolbar__link-container-content",
            url,
            onEditLinkClick: startEditLink,
            urlLabel
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.Button,
          {
            icon: import_icons.linkOff,
            label: (0, import_i18n.__)("Remove link"),
            onClick: () => {
              onLinkRemove();
              resetLightbox?.();
            },
            size: "compact"
          }
        )
      ] });
    }
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.ToolbarButton,
      {
        icon: import_icons.link,
        className: "components-toolbar__control",
        label: (0, import_i18n.__)("Link"),
        "aria-expanded": isOpen,
        onClick: openLinkUI,
        ref: setPopoverAnchor,
        isActive: !!url || lightboxEnabled && showLightboxSetting
      }
    ),
    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_index.default,
      {
        ref: wrapperRef,
        anchor: popoverAnchor,
        onFocusOutside: onFocusOutside(),
        onClose: closeLinkUI,
        renderSettings: hideLightboxPanel ? () => advancedOptions : null,
        additionalControls: showLinkEditor && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.NavigableMenu, { children: [
          getLinkDestinations().map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.MenuItem,
            {
              icon: link.icon,
              iconPosition: "left",
              onClick: () => {
                setUrlInput(null);
                onSetHref(link.url);
                stopEditLink();
              },
              children: link.title
            },
            link.linkDestination
          )),
          showLightboxSetting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.MenuItem,
            {
              className: "block-editor-url-popover__expand-on-click",
              icon: import_icons.fullscreen,
              info: (0, import_i18n.__)(
                "Scale the image with a lightbox effect."
              ),
              iconPosition: "left",
              onClick: () => {
                setUrlInput(null);
                onChangeUrl({
                  linkDestination: LINK_DESTINATION_NONE,
                  href: ""
                });
                onSetLightbox?.(true);
                stopEditLink();
              },
              children: (0, import_i18n.__)("Enlarge on click")
            },
            "expand-on-click"
          )
        ] }),
        offset: 13,
        children: PopoverChildren()
      }
    )
  ] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  __experimentalImageURLInputUI
});
//# sourceMappingURL=image-url-input-ui.js.map
