import React, {ReactNode} from 'react';
import {NavLink, NavLinkProps} from "react-router-dom";
import useRole from "../../hooks/useRole";
import {encodeParams} from "../../helpers/encodedParams";

interface NavLinkWithQueryProps extends NavLinkProps {
    children?: ReactNode
}

const NavLinkWithQuery = ({ children, to, ...props }: NavLinkWithQueryProps) => {
    const role = useRole();
    const [path, queryString] = to.toString().split('?');
    const existing = Object.fromEntries(new URLSearchParams(queryString || ''));

    return (
        <NavLink to={`${path}?t=${encodeParams({ ...existing, activeRole: role ?? '' })}`} {...props}>
            {children}
        </NavLink>
    );
};

export default NavLinkWithQuery;