import React, { useEffect, useRef } from 'react';
import { useAppNavContext } from './context';

export interface IAppNavSubMenuItem {
  className?: string;
  link: string;
  title: string;
  visible?: boolean;
  onClick?(): void;
  [x: string]: any;
}

export const AppNavSubMenuItem: React.FC<IAppNavSubMenuItem> = (props) => {
  const { setUpdated } = useAppNavContext();
  const { link, title = '', className = '', visible = null, onClick, ...otherProps } = props;
  const refSubMenuItem = useRef(null);

  function handleClick(e: React.MouseEvent) {
    e.preventDefault();
    onClick && onClick();
  }

  useEffect(() => {
    if (visible !== null && visible !== false) {
      setUpdated();
    }
  }, [visible]);

  if (visible === false) {
    return null;
  } else {
    return (
      <li ref={refSubMenuItem} data-child="true" className={`b-app-nav-sub-menu-item ${className}`} {...otherProps}>
        <a href={link} className="b-app-nav-sub-menu-link" onClick={(e) => handleClick(e)}>
          {title}
        </a>
      </li>
    );
  }
};