import React, { useEffect } from 'react';
import { AppNavMenu, IAppNavMenu } from './AppNavMenu';
import { AppNavMenuItem, IAppNavMenuItem } from './AppNavMenuItem';
import { AppNavSubMenu } from './AppNavSubMenu';
import { AppNavSubMenuItem, IAppNavSubMenuItem } from './AppNavSubMenuItem';
import { EVENT_TOGGLE_APP_NAV } from '../../constants';
import { AppNavProvider, useAppNavContext } from './context';

export interface IAppNav {
  className?: string;
  style?: any;
  [x: string]: any;
}

export interface IAppNavSubComponents {
  Menu: React.FC<IAppNavMenu>;
  MenuItem: React.FC<IAppNavMenuItem>;
  SubMenu: React.FC;
  SubMenuItem: React.FC<IAppNavSubMenuItem>;
}

const AppNavComponent: React.FC<IAppNav> = (props) => {
  const { className = '', ...otherProps } = props;
  const { toggled, setToggled } = useAppNavContext();

  const handleOverlayClick = () => {
    setToggled(false);
  };

  useEffect(() => {
    document.body.classList.add('b-has-app-nav');
    document.addEventListener(EVENT_TOGGLE_APP_NAV, function (e) {
      setToggled(!toggled);
    });
  }, []);

  return (
    <React.Fragment>
      <aside className={`b-app-nav ${toggled ? 'is-toggled' : ''} ${className}`} style={props.style} {...otherProps}>
        {props.children}
      </aside>
      {toggled && <div className="b-app-nav-overlay" onClick={handleOverlayClick}></div>}
    </React.Fragment>
  );
};

export const AppNav: React.FC<IAppNav> & IAppNavSubComponents = (props) => {
  return (
    <AppNavProvider>
      <AppNavComponent>{props.children}</AppNavComponent>
    </AppNavProvider>
  );
};

AppNav.MenuItem = AppNavMenuItem;
AppNav.Menu = AppNavMenu;
AppNav.SubMenu = AppNavSubMenu;
AppNav.SubMenuItem = AppNavSubMenuItem;