import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
// Menu Object
import MenuContent from 'ba-api/menu';
import { List, ListItem, ListItemIcon, ListItemText, Collapse, Icon } from '@material-ui/core';
import styles from './sidebar-jss';

function sortByKey(array, key) {
  return array.sort((a, b) => {
    const x = a[key]; const y = b[key];
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
  });
}

const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line
  return <NavLink to={props.to} {...props} innerRef={ref} />; // eslint-disable-line
});

function MainMenuSimple(props) {
  const {
    classes,
    toggleDrawerOpen,
    loadTransition,
    openSubMenu,
    open,
  } = props;

  const handleClick = () => {
    //toggleDrawerOpen();
    loadTransition(false);
  };

  const getMenus = menuArray => menuArray.map((item, index) => {
      return (
        <div key={index.toString()}>
          <ListItem
            button
            exact
            className={classNames(classes.head, open.indexOf(item.key) > -1 ? classes.opened : '')}
            activeClassName={classes.active}
            component={LinkBtn}
            to={item.link}
            onClick={handleClick}
            timeout="auto"
            unmountOnExit
          >
            {item.icon
              && (
                <ListItemIcon className={classes.iconWrapper}>
                  <Icon className={classes.icon}>{item.icon}</Icon>
                </ListItemIcon>
              )
            }
            <ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
          </ListItem>
        </div>
      );
  });
  return (
    <div>
      {getMenus(MenuContent)}
    </div>
  );
}

MainMenuSimple.propTypes = {
  classes: PropTypes.object.isRequired,
  open: PropTypes.object.isRequired,
  openSubMenu: PropTypes.func.isRequired,
  toggleDrawerOpen: PropTypes.func.isRequired,
  loadTransition: PropTypes.func.isRequired,
};

const openAction = (key, keyParent) => ({ type: 'OPEN_SUBMENU', key, keyParent });
const reducer = 'ui';

const mapStateToProps = state => ({
  force: state, // force active class for sidebar menu
  open: state.getIn([reducer, 'subMenuOpen'])
});

const mapDispatchToProps = dispatch => ({
  openSubMenu: bindActionCreators(openAction, dispatch)
});

const MainMenuMapped = connect(
  mapStateToProps,
  mapDispatchToProps
)(MainMenuSimple);

export default withStyles(styles)(MainMenuMapped);