import { html, nothing } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { ref } from "lit/directives/ref.js";
import { filterProtocol } from "../../../utils/xss-utils.js";
import { bindAnalyticsToLink } from "./bind-analytics-to-link.js";
const renderLinkWithItemAnalytics = ({ props })=>(children)=>{
        const { href, className, part, title, ariaLabel, stopPropagation = true, ref: refCallback, attributes, tabIndex, target = '_self', rel, onMouseOver, onMouseLeave, onFocus, onBlur, onSelect, onBeginDelayedSelect, onCancelPendingSelect, onInitializeLink } = props;
        return html`
      <a
        class=${ifDefined(className)}
        part=${ifDefined(part)}
        href=${filterProtocol(href)}
        target=${target}
        title=${ifDefined(title)}
        aria-label=${ifDefined(ariaLabel)}
        rel=${ifDefined(rel)}
        ${ref((el)=>{
            if (!el) return;
            const cleanup = bindAnalyticsToLink(el, {
                onSelect,
                onBeginDelayedSelect,
                onCancelPendingSelect,
                stopPropagation
            });
            if (onInitializeLink) onInitializeLink(cleanup);
            if (attributes?.length) [
                ...attributes
            ].forEach(({ nodeName, nodeValue })=>{
                el.setAttribute(nodeName, nodeValue);
            });
        })}
        ${refCallback ? ref(refCallback) : nothing}
        tabindex=${ifDefined(tabIndex)}
        @mouseover=${onMouseOver}
        @mouseleave=${onMouseLeave}
        @focus=${onFocus}
        @blur=${onBlur}
      >
        ${children}
      </a>
    `;
    };
export { renderLinkWithItemAnalytics };
