import React, { useCallback, memo } from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import { Icon, Menu } from 'antd';
import store from 'store';

const { SubMenu } = Menu;

const SiderMenu = memo(
  ({ menus, theme, collapsed, selectedKey, openKeys, onChangeSelectKey, onChangeOpenKeys }) => {
    const handleOpenChange = useCallback(
      _openKeys => {
        const rootSubmenuKeys = menus.filter(_ => _.routes).map(_ => _.key);
        const latestOpenKey = _openKeys.find(key => openKeys.indexOf(key) === -1);
        let newOpenKeys = _openKeys;
        if (rootSubmenuKeys.indexOf(latestOpenKey) !== -1) {
          newOpenKeys = latestOpenKey ? [latestOpenKey] : [];
        }
        store.set('openKeys', newOpenKeys);
        onChangeOpenKeys(newOpenKeys);
      },
      [openKeys],
    );

    const handleChangeSelectKey = useCallback(
      ({ key, keyPath }) => {
        if (keyPath.length > 1) {
          const _openKeys = keyPath.slice(1);
          store.set('openKeys', _openKeys);
          onChangeOpenKeys(_openKeys);
        }
        onChangeSelectKey(key);
      },
      [selectedKey],
    );

    const generateMenus = data => {
      return data.map(item => {
        if (item.routes) {
          return (
            <SubMenu
              key={item.key}
              title={
                <>
                  <Icon type='user' />
                  <span>{item.name}</span>
                </>
              }
            >
              {generateMenus(item.routes)}
            </SubMenu>
          );
        }
        return (
          <Menu.Item key={item.key}>
            <NavLink to={item.path}>
              <Icon type='user' />
              <span>{item.name}</span>
            </NavLink>
          </Menu.Item>
        );
      });
    };

    const menuProps = {
      mode: 'inline',
      theme: theme,
      onOpenChange: !collapsed ? handleOpenChange : null,
      selectedKeys: [selectedKey],
      onClick: handleChangeSelectKey,
    };

    if (!collapsed) menuProps.openKeys = openKeys;

    return <Menu {...menuProps}>{generateMenus(menus)}</Menu>;
  },
);

SiderMenu.propTypes = {
  menus: PropTypes.array,
  theme: PropTypes.string,
  collapsed: PropTypes.bool,
  selectedKey: PropTypes.string,
  openKeys: PropTypes.array,
  onChangeSelectKey: PropTypes.func,
  onChangeOpenKeys: PropTypes.func,
};

export default SiderMenu;