import React, { FunctionComponent } from "react";
import { Link } from "gatsby";

type Props = {
  to: string;
  exact?: boolean;
  activeClassName?: string;
  className?: string;
  activeStyle?: Object;
  style?: Object;
  currentPathName?: string;
  extraActivePaths?: string[];
};

/**
 * A <Link> wrapper that knows if it's "active" or not and sets the status on a parent li.
 */

export const NavItem: FunctionComponent<Props> = ({
  to,
  exact = true,
  activeClassName = "flex-active",
  className,
  extraActivePaths = [],
  currentPathName,
  ...rest
}) => {
  const paths: string[] = [currentPathName, ...extraActivePaths];

  const isActive = exact
    ? paths.includes(to)
    : paths.filter((path) => path !== "/" && (to === path || to.startsWith(path))).length > 0;
  return (
    <li className={isActive ? [className, activeClassName].filter((i) => i).join(" ") : className}>
      <Link to={to} activeClassName={activeClassName} {...rest} />
    </li>
  );
};