import React, { FC, useContext } from 'react';

import { NavigationContext } from './context';
import { Section, Item, ItemProps } from './components';
import { ConfigContext } from '../config-provider';

export interface NavigationProps {
  title?: React.ReactNode;
  location: string;
  children?: React.ReactNode;
  onDismiss?(): void;
  menuItemRender?: (
    originalProps: {
      className: string;
      onClick: (event: React.MouseEvent<HTMLElement>) => void;
    },
    itemProps: ItemProps,
    defaultDom: React.ReactNode,
  ) => React.ReactNode;
}

const Navigation: FC<NavigationProps> & {
  Item: typeof Item;
  Section: typeof Section;
} = function Navigation({ children, title, location, menuItemRender }: NavigationProps) {
  const { getPrefixCls } = useContext(ConfigContext);
  const prefixCls = getPrefixCls('navigation');

  const context = { location, menuItemRender };

  return (
    <NavigationContext.Provider value={context}>
      <nav className={prefixCls}>
        {title}
        <div className={`${prefixCls}-primary`}>{children}</div>
      </nav>
    </NavigationContext.Provider>
  );
};

Navigation.Item = Item;
Navigation.Section = Section;

export default Navigation;