import classNames from "classnames";
import React, { useContext } from "react";
import { parseLink } from "./../../../ricos-content/lib/node-utils.js";
import { RicosContext } from "./../../../ricos-context/index.js";
import { LINK_PLUGIN_WEB_LINK_BUTTON } from "../../data-hooks.js";
import { EditorBaseUrlContext } from "../../editor-base-url/editor-base-url-context.js";
import { getEditableUrl } from "../../url/get-editable-url.js";
import { getHrefUrl } from "../../url/get-href-url.js";
import classes from "./url-link-button-scss.js";
const createUrlLinkButton = ({
  services,
  attributes
}) => {
  return {
    id: "urlLink",
    type: "toggle",
    dataHook: LINK_PLUGIN_WEB_LINK_BUTTON,
    attributes,
    tooltip: null,
    getIcon: ({ attributes: attributes2 }) => {
      const baseUrl = services.editorProps?.baseUrl;
      const { url = "", rel = "", target = "_self" } = parseLink(attributes2.selectedUrlLinkData);
      const editableUrl = getEditableUrl(url, baseUrl);
      const hrefUrl = getHrefUrl(url, baseUrl);
      return () => /* @__PURE__ */ React.createElement(ToolbarUrl, { editableUrl, hrefUrl, rel, target });
    },
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(UrlLinkButton, { toolbarItem }),
    command: () => {
    }
  };
};
const UrlLinkButton = ({ toolbarItem }) => {
  const { baseUrl } = useContext(EditorBaseUrlContext);
  const { isMobile } = useContext(RicosContext);
  const selectedUrlLinkData = toolbarItem.attributes.selectedUrlLinkData;
  const dataHook = toolbarItem.presentation?.dataHook;
  const { url = "", rel = "", target = "_self" } = parseLink(selectedUrlLinkData);
  const editableUrl = getEditableUrl(url, baseUrl);
  const hrefUrl = getHrefUrl(url, baseUrl);
  return /* @__PURE__ */ React.createElement("div", { className: classes.toolbarUrlContainer }, /* @__PURE__ */ React.createElement(
    ToolbarUrl,
    {
      editableUrl,
      dataHook,
      hrefUrl,
      rel,
      target,
      className: classNames(classes.toolbarUrl, isMobile && classes.isMobile),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  ));
};
const ToolbarUrl = ({ dataHook, hrefUrl, rel, target, className, tabIndex, editableUrl }) => {
  return /* @__PURE__ */ React.createElement(
    "a",
    {
      "data-hook": dataHook,
      href: hrefUrl,
      rel,
      target,
      className,
      onMouseDown: (event) => event.preventDefault(),
      tabIndex
    },
    editableUrl
  );
};
export {
  createUrlLinkButton
};
//# sourceMappingURL=create-url-link-button.js.map
