import React from 'react';
import Submenu from 'submenu-g';
import { Icon } from 'antd';
import { UserOutlined } from '@ant-design/icons';

function BasicUse() {
    const menuData = [
    {
      title: 'menu_1',
      icon: <Icon type='idcard' />,
      path: 'personal',
      count: 10
    },
    {
      title: 'menu_2',
      icon: <Icon type='global' />,
      path: 'preferences',
      count: 10
    },
    {
      title: 'menu_3',
      icon: <Icon type='lock' />,
      path: 'editpwd',
      count: 10
    },
  ].map(item => ({ ...item, key: item.path }));

  const [selectedKey, setSelectedKey] = useState(menuData[0].path)
  const menuBoxRef = useRef(null);
  const onSelectedChange = (key, record, item) => setSelectedKey(key);
  const onSwitchChange = (mode) => {
    // console.log(mode)
  }
  const activeMenu = _.find(menuData, i => i.path === selectedKey)
  return (
    <Submenu
      menuData={menuData}
      selectedKey={selectedKey}
      width={180}
      setMenuBoxRef={ref => { menuBoxRef.current = ref }}
      showFlipOverFooter
      onCollapseChange={(collapsed) => {
        console.log(collapsed)
        console.log(menuBoxRef)
      }}
      onSelectedChange={onSelectedChange}
      onSwitchChange={onSwitchChange}
      extra={
        <div style={{ padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div>
            <Avatar size={64} icon={UserOutlined} />
            <div style={{ textAlign: 'center' }}>admin</div>
          </div>
        </div>
      }
    >
      <div style={{ padding: '20px', height: 400 }}>
        {activeMenu['title']}
      </div>
    </Submenu>
  )
}

React.render(<BasicUse/>, mountNode);