import {Menu} from 'antd';
import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
import {SK} from 'sk-js';
import OriginMenu from './OriginMenu';
import SKMenuItem from './SKMenuItem';
import SKSubMenu from './SKSubMenu';
import AntdComp from '../AntdComp';
import SKIcon from '../icon/SKIcon';
import { Dir } from '../AntdConst';

/*eslint no-unused-vars: "off"*/
/*eslint react/jsx-closing-tag-location: "off"*/

//modelId is selectedKeysId
export default class SKMenu extends AntdComp {
  static SK_COMP_NAME = 'SKMenu';
  static defaultProps = SK.assign({}, AntdComp.defaultProps, SKMenuItem.defaultProps, SKSubMenu.defaultProps, OriginMenu.defaultProps, {
    compTag: Menu,
    dataId: undefined,
    displayItem: (itemInfo) => {
      return true;
    },
    openKeysId: undefined,
  });
  static propTypes = SK.assign({}, AntdComp.propTypes, SKMenuItem.propTypes, SKSubMenu.propTypes, OriginMenu.propTypes, {
    dataId: PropTypes.string,
    displayItem: PropTypes.func,
    openKeysId: PropTypes.string,
  });

  constructor(...args) {
    super(...args);
    this.SK_COMP_NAME = SKMenu.SK_COMP_NAME;
  }

  addExtendChangedMonitor() {
    super.addExtendChangedMonitor();
    this.skModel().addIdChangedListener(this.openKeysId, this.updateUI);
  }

  rmvExtendChangedMonitor() {
    super.rmvExtendChangedMonitor();
    this.skModel().rmvIdChangedListener(this.openKeysId, this.updateUI);
  }

  handleClick = (clickInfo) => {
    if (this.props.onClick && _.isFunction(this.props.onClick)) {
      this.props.onClick(clickInfo);
    } else {
      this.skVal([clickInfo.key]);
    }
  };

  handleOpenChange = (openKeys) => {
    if (this.props.onOpenChange && _.isFunction(this.props.onOpenChange)) {
      this.props.onOpenChange(openKeys);
    } else {
      this.skModel().skVal(this.openKeysId, openKeys);
    }
  };

  menuMap(itemInfo) {
    const {displayItem, dataId, mode} = this.props;
    const menuCfgs = this.skModel().skVal(dataId);

    const displayTitle = ((mode === Dir.Inline) || menuCfgs.indexOf(itemInfo) === -1);
    const rtnCfgs = [];

    if (itemInfo.children && !_.isEmpty(itemInfo.children)) {
      rtnCfgs.push(<SKSubMenu
        {...this.skTransProps2Self(SKSubMenu)}
        eventKey={itemInfo.router}
        key={itemInfo.router}
        title={<span>
          <SKIcon type={itemInfo.icon}/>
          <span>{displayTitle && itemInfo.title}</span>
        </span>}
      >
        {itemInfo.children.map(this.menuMap.bind(this))}
      </SKSubMenu>);
    } else if (displayItem && displayItem(itemInfo)) {
      rtnCfgs.push(<SKMenuItem {...this.skTransProps2Self(SKMenuItem)} eventKey={itemInfo.router} key={itemInfo.router}>
        {itemInfo.icon && <SKIcon {...this.skTransProps2Self(SKIcon)} type={itemInfo.icon}/>}
        {displayTitle && itemInfo.title}
      </SKMenuItem>);
    }
    return rtnCfgs;
  }

  render() {
    const {compTag: CompTag, dataId, mode, theme} = this.props;

    return (
      <CompTag
        {...this.skTransProps2Self(CompTag)}
        mode={mode}
        onClick={this.handleClick}
        onOpenChange={this.handleOpenChange}
        openKeys={this.skVal().openKeys}
        selectedKeys={this.skVal().selectedKeys}
        theme={theme}
      >
        {dataId ? this.skModel().skVal(dataId).map(($itemInfo) => {
          return this.menuMap($itemInfo);
        }) : this.skTransProps2Child()}
      </CompTag>
    );
  }
}

@@ -333,13 +333,11 @@
 rt %7B
- 
 Dir
- 
 %7D fr
@@ -1244,32 +1244,38 @@
 edListener(this.
+props.
 openKeysId, this
@@ -1399,24 +1399,30 @@
 stener(this.
+props.
 openKeysId, 
@@ -1837,16 +1837,22 @@
 al(this.
+props.
 openKeys
@@ -2961,16 +2961,28 @@
 d, mode,
+ openKeysId,
  theme%7D 
@@ -3196,24 +3196,32 @@
 his.
+skModel().
 skVal(
-).
 openKeys
 %7D%0A  
@@ -3212,24 +3212,27 @@
 Val(openKeys
+Id)
 %7D%0A        se
@@ -3259,21 +3259,8 @@
 al()
-.selectedKeys
 %7D%0A  

fix bug