import React, { ReactNode, useContext, useEffect, useState } from 'react';
import { Collapse, ConfigProvider, Menu as AntdMenu, MenuProps } from 'antd';
import classNames from 'classnames';
import MenuItem from './MenuItem';
import SubMenu from './SubMenu';
import Divider from './MenuDivider';
import ItemGroup from './MenuItemGroup';
import './style/index.less';
import { useTheme } from '@btri-ui/hooks';
import { Icon } from '../index';
interface MenuExtraProps {
  isDropdown?: boolean;
  iconName?: string;
  isCollapsedIcon?: boolean;
  navigation?: boolean;
  leftNode?: ReactNode;
  rightNode?: ReactNode;
}

const Menu = ({
  className = '',
  isDropdown = false,
  iconName = '',
  isCollapsedIcon = false,
  navigation = false,
  leftNode = '',
  rightNode = '',
  ...props
}: MenuProps & MenuExtraProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-menu');
  const dropdownMenuCls = getPrefixCls('btri-dropdown-menu');
  const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
  const themth: string | undefined = useTheme()[2];

  const brtiIcon = <Icon iconName="DownSmall" />;

  return (
    <div
      className={classNames(
        `${prefixCls}-box`,
        className,
        {
          [`${dropdownMenuCls}`]: isDropdown,
        },
        `${prefixCls}-${themth}`,
        `${navigation && prefixCls + '-NavBox'}`,
      )}
    >
      {navigation && leftNode}
      <AntdMenu
        {...props}
        className={classNames(`${navigation && prefixCls + '-NavMenu'}`)}
        inlineCollapsed={isCollapsedIcon ? isCollapsed : props.inlineCollapsed}
        // expandIcon={props.expandIcon || brtiIcon}
        mode={navigation ? 'horizontal' : props.mode}
      >
        {props.children}
      </AntdMenu>
      {isCollapsedIcon && (
        <Icon
          iconName={!isCollapsed ? 'MenuUnfold' : 'MenuFold'}
          className={classNames(
            `${prefixCls}-Collapsed`,
            `${isCollapsed && prefixCls + '-CollapseYet'}`,
          )}
          onClick={() => {
            setIsCollapsed(!isCollapsed);
          }}
        />
      )}
      {navigation && rightNode}
    </div>
  );
};
Menu.Item = MenuItem;
Menu.SubMenu = SubMenu;
Menu.Divider = Divider;
Menu.ItemGroup = ItemGroup;
export { Menu };