import ConfigProvider from '../config-provider';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { Nav as NextNav } from '@alifd/next';
import { NavProps as NextNavProps } from '@alifd/next/types/nav';

interface NavProps extends NextNavProps {
  size?: 'large' | 'medium';
}
class Nav extends Component<NavProps> {
  static Group = NextNav.Group;
  static Item = NextNav.Item;
  static PopupItem = NextNav.PopupItem;
  static SubNav = NextNav.SubNav;
  static SubMenu = NextNav.SubNav; // add alias

  render() {
    const { size = 'medium', direction = 'ver' } = this.props;
    const { prefix = 'next-', className, inlineIndent = 28, ...otherProps } = this.props;
    if (direction === 'ver') {
      return (
        <NextNav
          {...otherProps}
          prefix={prefix}
          activeDirection={null}
          inlineIndent={inlineIndent}
          className={cls(className, {
            [`${prefix}large`]: size === 'large',
            [`${prefix}medium`]: size === 'medium',
          })}
        />
      );
    }
    return (
      <NextNav
        {...otherProps}
        prefix={prefix}
        className={cls(className, {
        })}
      />
    );
  }
}
hoistNonReactStatics(Nav, NextNav);
export default ConfigProvider.config(Nav);