import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import * as selectors from '../selectors';
/**
 * A single navigation item
 * @param {string} to       - path to navigate to
 * @param {array} children  - children to render
 * @param {func} onClick    - fired when item is clicked on
 * @param {string} hash     - current hash name from redux
 */

var NavItem = function NavItem(_ref) {
  var name = _ref.name,
      path = _ref.path,
      icon = _ref.icon,
      toggleMobileOpen = _ref.toggleMobileOpen,
      hash = _ref.hash;
  var isActive = path === hash;
  var activeClass = isActive ? 'active' : '';
  return React.createElement("li", {
    className: "nav-item ".concat(activeClass)
  }, React.createElement(Link, {
    to: path,
    className: 'first-level-link',
    onClick: toggleMobileOpen
  }, React.createElement("span", {
    className: icon,
    "aria-hidden": 'true'
  }), name));
};

export var mapStateToProps = createStructuredSelector({
  hash: selectors.getHash()
});
var withRedux = connect(mapStateToProps);
export default withRedux(NavItem);