import React from "react";
import {
  Link as ReactRouterLink,
  matchPath,
  useLocation,
} from "react-router-dom";

export function Link({
  className = "",
  inactiveClassName = "",
  activeClassName = "",
  to,
  exact = false,
  children,
  activeFor = [],
}) {
  let location = useLocation();
  let isActive;

  if (activeFor.length > 0) {
    isActive = activeFor.find((matcher) => {
      return matchPath(location.pathname, {
        path: matcher.path,
        exact: matcher.exact,
      });
    });
    // isActive = matchPath(location.path, { path: to.split("?")[0] });
  } else {
    let match = matchPath(location.pathname, { path: to.split("?")[0] });
    isActive = match && (exact ? match.isExact : true);
  }

  // let urlToMatch = activeFor || to.split("?")[0];
  // let match = useRouteMatch(urlToMatch);

  // if (activeFor.length > 0) {
  //   isActive = match;
  // } else {
  //   isActive = match && (exact ? match.isExact : true);
  // }

  let classes = `${className} ${
    isActive ? activeClassName : inactiveClassName
  }`;

  return (
    <ReactRouterLink className={classes} to={to} exact={exact ? 1 : 0}>
      {children}
    </ReactRouterLink>
  );
}