import { useLocation, matchPath } from 'react-router-dom';

import { linkIcon } from 'src/constants/widgets';
import { librariesRoutes } from 'src/pages/dashboard/libraries/routes';
import { Icon } from 'src/types/icons';

import NavItem from 'src/components/dashboard/sidebar/NavItem';
import WidgetIcon from 'src/components/dashboard/widgets/WidgetIcon';

export type NavLibraryItemProps = {
  id: number | string;
  title: string;
  icon?: Icon;
  onClick?: () => void;
};

const NavLibraryItem = ({
  id,
  title,
  icon = linkIcon,
  onClick,
}: NavLibraryItemProps) => {
  const location = useLocation();

  const PATH = librariesRoutes.library(id);

  const exactMatch = !!matchPath(
    {
      path: PATH,
      end: false,
    },
    location.pathname,
  );

  return (
    <NavItem
      title={title}
      path={PATH}
      active={exactMatch}
      onClick={onClick}
      icon={<WidgetIcon icon={icon} />}
      isSubMenu
    />
  );
};

export default NavLibraryItem;