var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { createElement as _createElement } from "react";
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { NavLink } from 'react-router';
import styled from 'styled-components';
import { usePreloadRoute } from '../router/fetching';
import { useResolvedTo } from '../router/resolve-to';
import { DisplayCtx } from '../shared/context';
import DynamicComponent from '../shared/dynamic-component/dynamic-component';
import { useVariable } from '../shared/interactivity';
import useComponentStyles from '../shared/utils/use-component-styles';
import {} from '../types';
const NavLinkWrapper = React.forwardRef((props, ref) => {
    const { to, className, style, activeStyle, inactiveStyle, prefetch } = props, rest = __rest(props, ["to", "className", "style", "activeStyle", "inactiveStyle", "prefetch"]);
    return (_jsx(NavLink, Object.assign({ ref: ref, to: to, className: className, style: ({ isActive }) => {
            return Object.assign(Object.assign({}, style), (isActive ? activeStyle : inactiveStyle));
        } }, rest, { children: props.children })));
});
const StyledNavLink = styled(NavLinkWrapper) `
    &[aria-current] {
        ${(props) => props.$activeCss}
    }

    &:not([aria-current]) {
        ${(props) => props.$inactiveCss}
    }
`;
function LinkImpl(props) {
    const displayCtx = React.useContext(DisplayCtx);
    const [style, css] = useComponentStyles(props);
    const [activeStyle, activeCss] = useComponentStyles(props, true, 'active_css');
    const [inactiveStyle, inactiveCss] = useComponentStyles(props, false, 'inactive_css');
    const [to] = useVariable(props.to);
    // Prefetching approach inspired by SolidJS's router:
    // https://github.com/solidjs/solid-router/blob/30f08665e87829736a9333d55863d27905f4a92d/src/data/events.ts#L7
    const preloadRoute = usePreloadRoute();
    const preloadTimeoutRef = React.useRef(null);
    // Clear any existing timeout
    const clearPreloadTimeout = React.useCallback(() => {
        if (preloadTimeoutRef.current !== null) {
            clearTimeout(preloadTimeoutRef.current);
            preloadTimeoutRef.current = null;
        }
    }, []);
    // Immediate preload (for focus/touch events)
    const handleImmediatePreload = React.useCallback(() => {
        if (!props.prefetch) {
            return;
        }
        preloadRoute(to);
    }, [props.prefetch, preloadRoute, to]);
    // Delayed preload (for mouse move events)
    const handleDelayedPreload = React.useCallback(() => {
        if (!props.prefetch) {
            return;
        }
        // Clear any existing timeout
        clearPreloadTimeout();
        // Set timeout for delayed preload (20ms)
        preloadTimeoutRef.current = window.setTimeout(() => {
            preloadRoute(to);
        }, 20);
    }, [props.prefetch, to, clearPreloadTimeout, preloadRoute]);
    // Event handlers
    const handleMouseMove = React.useCallback(() => {
        handleDelayedPreload();
    }, [handleDelayedPreload]);
    const handleFocus = React.useCallback(() => {
        handleImmediatePreload();
    }, [handleImmediatePreload]);
    const handleTouchStart = React.useCallback(() => {
        handleImmediatePreload();
    }, [handleImmediatePreload]);
    // Cleanup timeout on unmount
    React.useEffect(() => {
        return () => {
            clearPreloadTimeout();
        };
    }, [clearPreloadTimeout]);
    return (_jsx(DisplayCtx.Provider, { value: { component: 'anchor', direction: displayCtx.direction }, children: _jsx(StyledNavLink, { id: props.id_, className: props.className, to: to, end: props.end, caseSensitive: props.case_sensitive, replace: props.replace, relative: props.relative, "$activeCss": css + activeCss, "$inactiveCss": css + inactiveCss, style: style, activeStyle: activeStyle, inactiveStyle: inactiveStyle, onMouseMove: props.prefetch ? handleMouseMove : undefined, onFocus: props.prefetch ? handleFocus : undefined, onTouchStart: props.prefetch ? handleTouchStart : undefined, 
            // core AnchorElementAttributes
            download: props.download, referrerPolicy: props.referrer_policy, target: props.target, rel: props.rel, children: props.children.map((child, idx) => (_jsx(DynamicComponent, { component: child }, idx))) }) }));
}
function LinkResolveImpl(props) {
    // resolve variable param variable values
    const to = useResolvedTo(props.to);
    return _jsx(LinkImpl, Object.assign({}, props, { to: to }));
}
function Link(props) {
    // unwrap variable -> value
    const [to] = useVariable(props.to);
    // key required to ensure we remount since we call hooks in a loop on props.to
    return _createElement(LinkResolveImpl, Object.assign({}, props, { to: to, key: JSON.stringify(to) }));
}
export default Link;
//# sourceMappingURL=link.js.map