import React from 'react';
import cx from 'classnames';
import { NavLink } from 'react-router-dom';
import { formatMessage } from 'src/utils';
import type { LinkProps } from './legacy-link';

const isActive = (
    route: { isExact?: boolean } | null,
    location: { pathname: string },
    urlMatch?: string | string[]
): boolean => {
    if (route && route.isExact) return true;
    if (urlMatch)
        return (Array.isArray(urlMatch) ? urlMatch : [urlMatch]).some(match =>
            location.pathname.match(match.replace('*', '.*'))
        );
    return false;
};

export const CLASSNAME = 'nav-link';

const ReactifiedLink: React.FC<LinkProps> = ({
    className,
    activeClassName,
    term,
    url,
    urlMatch,
}) => (
    <NavLink
        to={url}
        exact
        className={cx(CLASSNAME, className)}
        activeClassName={activeClassName}
        isActive={(route, location) => isActive(route, location, urlMatch)}
    >
        {formatMessage(term)}
    </NavLink>
);

export default ReactifiedLink;