text: import React, { useState, useEffect } from 'react'
  import { connect } from 'react-redux'
  import { Menu } from 'antd'
  import { Link, withRouter } from 'react-router-dom'
  import classNames from 'classnames'
  import store from 'store'
  import { find } from 'lodash'
  import style from './style.module.scss'
  
  const mapStateToProps = ({ menu, settings, user }) => ({
    menuData: menu.menuData,
    logo: settings.logo,
    version: settings.version,
    menuColor: settings.menuColor,
    role: user.role,
  })
  
  const MenuTop = ({
    menuData = [],
    location: { pathname },
  
    menuColor,
    logo,
    version,
    role,
  }) => {
    const [selectedKeys, setSelectedKeys] = useState(store.get('app.menu.selectedKeys') || [])
  
    useEffect(() => {
      applySelectedKeys()
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [pathname, menuData])
  
    const applySelectedKeys = () => {
      const flattenItems = (items, key) =>
        items.reduce((flattenedItems, item) => {
          flattenedItems.push(item)
          if (Array.isArray(item[key])) {
            return flattenedItems.concat(flattenItems(item[key], key))
          }
          return flattenedItems
        }, [])
      const selectedItem = find(flattenItems(menuData, 'children'), ['url', pathname])
      setSelectedKeys(selectedItem ? [selectedItem.key] : [])
    }
  
    const handleClick = (e) => {
      store.set('app.menu.selectedKeys', [e.key])
      setSelectedKeys([e.key])
    }
  
    const generateMenuItems = () => {
      const generateItem = (item) => {
        const { key, title, url, icon, disabled, count } = item
        if (item.category) {
          return null
        }
        if (item.url) {
          return (
            <Menu.Item key={key} disabled={disabled}>
              {item.target && (
                <a href={url} target={item.target} rel="noopener noreferrer">
                  {icon && <span className={`${icon} ${style.icon}`} />}
                  <span className={style.title}>{title}</span>
                  {count && <span className="badge badge-success ml-2">{count}</span>}
                </a>
              )}
              {!item.target && (
                <Link to={url}>
                  {icon && <span className={`${icon} ${style.icon}`} />}
                  <span className={style.title}>{title}</span>
                  {count && <span className="badge badge-success ml-2">{count}</span>}
                </Link>
              )}
            </Menu.Item>
          )
        }
        return (
          <Menu.Item key={key} disabled={disabled}>
            {icon && <span className={`${icon} ${style.icon}`} />}
            <span className={style.title}>{title}</span>
            {count && <span className="badge badge-success ml-2">{count}</span>}
          </Menu.Item>
        )
      }
      const generateSubmenu = (items) =>
        items.map((menuItem) => {
          if (menuItem.children) {
            const subMenuTitle = (
              <span key={menuItem.key}>
                {menuItem.icon && <span className={`${menuItem.icon} ${style.icon}`} />}
                <span className={style.title}>{menuItem.title}</span>
                {menuItem.count && <span className="badge badge-success ml-2">{menuItem.count}</span>}
              </span>
            )
            return (
              <Menu.SubMenu title={subMenuTitle} key={menuItem.key}>
                {generateSubmenu(menuItem.children)}
              </Menu.SubMenu>
            )
          }
          return generateItem(menuItem)
        })
      return menuData.map((menuItem) => {
        if (menuItem.roles && !menuItem.roles.includes(role)) {
          return null
        }
        if (menuItem.children) {
          const subMenuTitle = (
            <span key={menuItem.key}>
              {menuItem.icon && <span className={`${menuItem.icon} ${style.icon}`} />}
              <span className={style.title}>{menuItem.title}</span>
              {menuItem.count && <span className="badge badge-success ml-2">{menuItem.count}</span>}
            </span>
          )
          return (
            <Menu.SubMenu title={subMenuTitle} key={menuItem.key}>
              {generateSubmenu(menuItem.children)}
            </Menu.SubMenu>
          )
        }
        return generateItem(menuItem)
      })
    }
  
    return (
      <div
        className={classNames(`${style.menu}`, {
          [style.white]: menuColor === 'white',
          [style.gray]: menuColor === 'gray',
          [style.dark]: menuColor === 'dark',
        })}
      >
        <div className={style.logoContainer}>
          <div className={style.logo}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              version="1.1"
              height="24px"
              width="24px"
            >
              <g>
                <path
                  fill="#4b7cf3"
                  strokeWidth="1"
                  stroke="#4b7cf3"
                  d="M12,10.9c-0.1,0-0.2,0-0.2-0.1L3.5,6.1C3.4,6,3.3,5.8,3.3,5.6c0-0.2,0.1-0.3,0.2-0.4l8.2-4.7c0.2-0.1,0.3-0.1,0.5,0      l8.2,4.7c0.2,0.1,0.2,0.3,0.2,0.4S20.6,6,20.5,6.1l-8.2,4.7C12.2,10.8,12.1,10.9,12,10.9z M4.8,5.6L12,9.8l7.2-4.2L12,1.5      L4.8,5.6z"
                />
                <path
                  fill="#4b7cf3"
                  strokeWidth="1"
                  stroke="#4b7cf3"
                  d="M13.6,23.6c-0.1,0-0.2,0-0.2-0.1c-0.2-0.1-0.2-0.3-0.2-0.4v-9.5c0-0.2,0.1-0.3,0.2-0.4l8.2-4.7c0.2-0.1,0.3-0.1,0.5,0      c0.2,0.1,0.2,0.3,0.2,0.4v9.5c0,0.2-0.1,0.3-0.3,0.4l-8.2,4.7C13.8,23.6,13.7,23.6,13.6,23.6z M14.1,13.9v8.3l7.2-4.2V9.8      L14.1,13.9z"
                />
                <path
                  fill="#4b7cf3"
                  strokeWidth="1"
                  stroke="#4b7cf3"
                  d="M10.4,23.6c-0.1,0-0.2,0-0.2-0.1l-8.2-4.7c-0.2-0.1-0.3-0.3-0.3-0.4V8.9c0-0.2,0.1-0.3,0.2-0.4c0.2-0.1,0.3-0.1,0.5,0      l8.2,4.7c0.2,0.1,0.2,0.3,0.2,0.4v9.5c0,0.2-0.1,0.3-0.2,0.4C10.5,23.6,10.5,23.6,10.4,23.6z M2.7,18.1l7.2,4.2v-8.3L2.7,9.8      V18.1z"
                />
              </g>
            </svg>
            <div className={style.name}>{logo}</div>
            <div className={`${style.descr} text-capitalize`}>{version}</div>
          </div>
        </div>
        <div className={style.navigation}>
          <Menu onClick={handleClick} selectedKeys={selectedKeys} mode="horizontal">
            {generateMenuItems()}
          </Menu>
        </div>
      </div>
    )
  }
  
  export default withRouter(connect(mapStateToProps)(MenuTop))
  