"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect } from "react";
import { cssUtils } from "../cssUtils.js";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { Tooltip } from "../tooltip/Tooltip.js";
import { useTooltip } from "../tooltip/useTooltip.js";
import { useEnsuredRef } from "../useEnsuredRef.js";
import { NavItem } from "./NavItem.js";
import { navItemLink } from "./navItemStyles.js";
/**
 * **Client Component**
 *
 * @since 6.0.0
 */ export const NavItemLink = /*#__PURE__*/ forwardRef(function NavItemLink(props, propRef) {
    const { as: Component = "a", href, active, activeClassName, beforeAddon, afterAddon, className, children, liProps, spanProps, disabled = !href, onClick, onBlur, onDragStart, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onMouseUp, onTouchMove, onTouchEnd, onTouchStart, tooltipOptions, disableScrollIntoView, ...remaining } = props;
    const [linkRef, linkRefCallback] = useEnsuredRef(propRef);
    const { handlers, ripples } = useElementInteraction({
        disabled,
        onClick,
        onBlur,
        onDragStart,
        onKeyDown,
        onKeyUp,
        onMouseDown,
        onMouseLeave,
        onMouseUp,
        onTouchMove,
        onTouchEnd,
        onTouchStart
    });
    const { elementProps, tooltipProps, overflowRef } = useTooltip({
        overflowOnly: true,
        defaultPosition: "right",
        ...tooltipOptions,
        ...handlers
    });
    useEffect(()=>{
        const link = linkRef.current;
        if (!active || !link || disableScrollIntoView || document.activeElement === link) {
            return;
        }
        link.scrollIntoView({
            block: "center"
        });
    }, [
        active,
        disableScrollIntoView,
        linkRef
    ]);
    return /*#__PURE__*/ _jsxs(NavItem, {
        ...liProps,
        children: [
            /*#__PURE__*/ _jsxs(Component, {
                ...remaining,
                ...handlers,
                ...elementProps,
                ref: linkRefCallback,
                href: href,
                className: navItemLink({
                    active,
                    activeClassName,
                    className
                }),
                children: [
                    beforeAddon,
                    /*#__PURE__*/ _jsx("span", {
                        ...spanProps,
                        ref: overflowRef,
                        className: cssUtils({
                            className: spanProps?.className,
                            textOverflow: "ellipsis"
                        }),
                        children: children
                    }),
                    afterAddon,
                    ripples
                ]
            }),
            /*#__PURE__*/ _jsx(Tooltip, {
                ...tooltipProps,
                children: children
            })
        ]
    });
});

//# sourceMappingURL=NavItemLink.js.map