// packages/block-editor/src/components/url-popover/image-url-input-ui.js
import { __ } from "@wordpress/i18n";
import {
  useRef,
  useEffect,
  useState,
  createInterpolateElement
} from "@wordpress/element";
import { focus } from "@wordpress/dom";
import {
  ToolbarButton,
  NavigableMenu,
  Button,
  MenuItem,
  ToggleControl,
  TextControl,
  __experimentalVStack as VStack,
  ExternalLink
} from "@wordpress/components";
import {
  Icon,
  link as linkIcon,
  image,
  page,
  fullscreen,
  linkOff
} from "@wordpress/icons";
import { prependHTTPS } from "@wordpress/url";
import URLPopover from "./index.mjs";
import { Fragment, jsx, jsxs } from "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 = ["noopener"];
var ImageURLInputUI = ({
  linkDestination,
  onChangeUrl,
  url,
  mediaType = "image",
  mediaUrl,
  mediaLink,
  linkTarget,
  linkClass,
  rel,
  showLightboxSetting,
  lightboxEnabled,
  onSetLightbox,
  resetLightbox
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [popoverAnchor, setPopoverAnchor] = useState(null);
  const openLinkUI = () => {
    setIsOpen(true);
  };
  const [isEditingLink, setIsEditingLink] = useState(false);
  const [urlInput, setUrlInput] = useState(null);
  const autocompleteRef = useRef(null);
  const wrapperRef = useRef();
  useEffect(() => {
    if (!wrapperRef.current) {
      return;
    }
    const nextFocusTarget = 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: prependHTTPS(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: __("Link to image file"),
        url: mediaType === "image" ? mediaUrl : void 0,
        icon: image
      }
    ];
    if (mediaType === "image" && mediaLink) {
      linkDestinations.push({
        linkDestination: LINK_DESTINATION_ATTACHMENT,
        title: __("Link to attachment page"),
        url: mediaType === "image" ? mediaLink : void 0,
        icon: 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__ */ jsxs(VStack, { spacing: "3", children: [
    /* @__PURE__ */ jsx(
      ToggleControl,
      {
        label: __("Open in new tab"),
        onChange: onSetNewTab,
        checked: linkTarget === "_blank"
      }
    ),
    /* @__PURE__ */ jsx(
      TextControl,
      {
        label: __("Link relation"),
        value: rel ?? "",
        onChange: onSetLinkRel,
        help: createInterpolateElement(
          __(
            "The <a>Link Relation</a> attribute defines the relationship between a linked resource and the current document."
          ),
          {
            a: /* @__PURE__ */ jsx(ExternalLink, { href: "https://developer.mozilla.org/docs/Web/HTML/Attributes/rel" })
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      TextControl,
      {
        label: __("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__ */ jsxs("div", { className: "block-editor-url-popover__expand-on-click", children: [
        /* @__PURE__ */ jsx(Icon, { icon: fullscreen }),
        /* @__PURE__ */ jsxs("div", { className: "text", children: [
          /* @__PURE__ */ jsx("p", { children: __("Enlarge on click") }),
          /* @__PURE__ */ jsx("p", { className: "description", children: __("Scales the image with a lightbox effect") })
        ] }),
        /* @__PURE__ */ jsx(
          Button,
          {
            icon: linkOff,
            label: __("Disable enlarge on click"),
            onClick: () => {
              onSetLightbox?.(false);
            },
            size: "compact"
          }
        )
      ] });
    } else if (!url || isEditingLink) {
      return /* @__PURE__ */ jsx(
        URLPopover.LinkEditor,
        {
          className: "block-editor-format-toolbar__link-container-content",
          value: linkEditorValue,
          onChangeInputValue: setUrlInput,
          onSubmit: onSubmitLinkChange(),
          autocompleteRef
        }
      );
    } else if (url && !isEditingLink) {
      return /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(
          URLPopover.LinkViewer,
          {
            className: "block-editor-format-toolbar__link-container-content",
            url,
            onEditLinkClick: startEditLink,
            urlLabel
          }
        ),
        /* @__PURE__ */ jsx(
          Button,
          {
            icon: linkOff,
            label: __("Remove link"),
            onClick: () => {
              onLinkRemove();
              resetLightbox?.();
            },
            size: "compact"
          }
        )
      ] });
    }
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        icon: linkIcon,
        className: "components-toolbar__control",
        label: __("Link"),
        "aria-expanded": isOpen,
        onClick: openLinkUI,
        ref: setPopoverAnchor,
        isActive: !!url || lightboxEnabled && showLightboxSetting
      }
    ),
    isOpen && /* @__PURE__ */ jsx(
      URLPopover,
      {
        ref: wrapperRef,
        anchor: popoverAnchor,
        onFocusOutside: onFocusOutside(),
        onClose: closeLinkUI,
        renderSettings: hideLightboxPanel ? () => advancedOptions : null,
        additionalControls: showLinkEditor && /* @__PURE__ */ jsxs(NavigableMenu, { children: [
          getLinkDestinations().map((link) => /* @__PURE__ */ jsx(
            MenuItem,
            {
              icon: link.icon,
              iconPosition: "left",
              onClick: () => {
                setUrlInput(null);
                onSetHref(link.url);
                stopEditLink();
              },
              children: link.title
            },
            link.linkDestination
          )),
          showLightboxSetting && /* @__PURE__ */ jsx(
            MenuItem,
            {
              className: "block-editor-url-popover__expand-on-click",
              icon: fullscreen,
              info: __(
                "Scale the image with a lightbox effect."
              ),
              iconPosition: "left",
              onClick: () => {
                setUrlInput(null);
                onChangeUrl({
                  linkDestination: LINK_DESTINATION_NONE,
                  href: ""
                });
                onSetLightbox?.(true);
                stopEditLink();
              },
              children: __("Enlarge on click")
            },
            "expand-on-click"
          )
        ] }),
        offset: 13,
        children: PopoverChildren()
      }
    )
  ] });
};
export {
  ImageURLInputUI as __experimentalImageURLInputUI
};
//# sourceMappingURL=image-url-input-ui.mjs.map
