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

export interface IAppNavMenuItem {
  link?: string;
  title: string;
  className?: string;
  isParent?: boolean;
  icon?: JSX.Element;
  visible?: boolean;
  onClick?(): void;
  [x: string]: any;
}

export const AppNavMenuItem: React.FC<IAppNavMenuItem> = (props) => {
  const { setUpdated } = useAppNavContext();
  const { children, link = '#', title = '', className = '', isParent = false, icon, visible = null, onClick, ...otherProps } = props;
  const refMenuItem = useRef(null);

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

  useEffect(() => {
    if (isParent && refMenuItem.current && visible !== false) {
      refMenuItem.current.dataset.parent = 'true';
    }
    if (visible !== null && visible !== false) {
      setUpdated();
    }
  }, [visible]);

  if (visible === false) {
    return null;
  } else {
    return (
      <li ref={refMenuItem} className={`b-app-nav-menu-item ${isParent ? 'is-parent' : ''} ${className}`} {...otherProps}>
        <a href={link} className="b-app-nav-menu-link" onClick={(e) => handleClick(e)}>
          {icon && <span className="b-app-nav-menu-icon-container">{icon}</span>}
          <span className="b-app-nav-menu-link-title">{title}</span>
          {isParent && <IconChevronDown className="b-app-nav-menu-link-arrow" />}
        </a>
        {children}
      </li>
    );
  }
};