import React from 'react';
import { Utils } from '../../utils/util';

export const NJNavbarItem = React.forwardRef<HTMLLIElement, INavbarItemProps>(
  ({ id, href, title, target, onClickItem, className, isDisabled, isActive, children }, ref) => {
    const navLinkClass = Utils.classNames('nj-navbar__nav-link', {
      active: isActive,
      disabled: isDisabled
    });

    return (
      <li ref={ref} className={Utils.classNames('nj-navbar__nav-item', className)} id={id}>
        <a
          className={navLinkClass}
          href={href}
          role="menuitem"
          title={title}
          onClick={(e) => {
            e.preventDefault();
            if (typeof onClickItem === 'function') onClickItem(id, e);
          }}
          target={target}
        >
          {children}
        </a>
      </li>
    );
  }
);

export interface INavbarItemProps {
  /**
   * Item id
   */
  id: string;
  /**
   * Link href
   */
  href?: string;
  /**
   * Link title
   */
  title?: string;
  /**
   * Link target
   */
  target?: '_blank' | '_self';
  /**
   * text or Icon component
   */
  children: React.ReactNode;
  /**
   * Get item id and event
   */
  onClickItem?: (id: string, event: React.MouseEvent<HTMLAnchorElement>) => void;
  /**
   * Optional additional className
   */
  className?: string;
  /**
   * Whether item is disabled or not
   */
  isDisabled?: boolean;
  /**
   * Whether item is active or not
   */
  isActive?: boolean;
}