import React, { useState } from 'react';
import cx from 'classnames';
import { Labs, Developer, Enterprise } from '@dragonchain-dev/dragon-kit-icons';
import { NavItem } from '../NavItem';
import { LinkTo } from '../LinkTo';
import { DeveloperNavPanel } from '../DeveloperNavPanel';
import { Title } from '../Title'; // add use-memo???

var NavBar = function NavBar(_ref) {
  var links = _ref.links;

  var _useState = useState(false),
      displaySubNav = _useState[0],
      setDisplaySubNav = _useState[1];

  var clickSubnav = function clickSubnav() {
    return setDisplaySubNav(false);
  };

  var getIcon = function getIcon(icon) {
    var Icon = {
      labs: Labs,
      developer: Developer,
      enterprise: Enterprise
    }[icon];
    return /*#__PURE__*/React.createElement("div", {
      className: "icon"
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, null)));
  };

  var getSubNavItemSet = function getSubNavItemSet(navItems) {
    return navItems.map(function (item) {
      var name = item.name,
          type = item.type,
          url = item.url,
          icon = item.icon,
          description = item.description;
      return /*#__PURE__*/React.createElement(LinkTo, {
        key: name,
        type: type,
        url: url,
        onClick: clickSubnav
      }, /*#__PURE__*/React.createElement("div", {
        className: "inner"
      }, item.icon && getIcon(icon), /*#__PURE__*/React.createElement("div", {
        className: "content"
      }, /*#__PURE__*/React.createElement(Title, {
        tag: "div"
      }, name), description && /*#__PURE__*/React.createElement("p", null, description))));
    });
  };

  var getSubNav = function getSubNav(parent, subnav) {
    var isMega = subnav.isMega,
        developerPanel = subnav.developerPanel,
        navItems = subnav.navItems;
    var subNavClasses = cx('subnav', isMega && 'is-mega-menu', displaySubNav && 'show');
    return /*#__PURE__*/React.createElement("div", {
      key: parent,
      className: subNavClasses,
      onBlur: function onBlur() {
        return setDisplaySubNav(false);
      },
      onMouseOut: function onMouseOut() {
        return setDisplaySubNav(false);
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "inner"
    }, /*#__PURE__*/React.createElement("div", {
      className: "layout"
    }, /*#__PURE__*/React.createElement("nav", {
      className: "subnav-links"
    }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement(NavItem, null, getSubNavItemSet(navItems)))), developerPanel && /*#__PURE__*/React.createElement(DeveloperNavPanel, null))));
  };

  var toggleSubNav = function toggleSubNav(subNav, show) {
    if (subNav) setDisplaySubNav(show);
  };

  var getLinks = function getLinks() {
    return links.map(function (link) {
      var name = link.name,
          type = link.type,
          url = link.url,
          subnav = link.subnav;
      return /*#__PURE__*/React.createElement(NavItem, {
        key: name,
        onFocus: function onFocus() {
          return toggleSubNav(subnav, true);
        },
        onBlur: function onBlur() {
          return toggleSubNav(subnav, false);
        },
        onMouseOver: function onMouseOver() {
          return toggleSubNav(subnav, true);
        },
        onMouseOut: function onMouseOut() {
          return toggleSubNav(subnav, false);
        }
      }, /*#__PURE__*/React.createElement(LinkTo, {
        type: type,
        url: url
      }, name), subnav && getSubNav(name, subnav));
    });
  };

  return /*#__PURE__*/React.createElement("nav", {
    className: "nav"
  }, /*#__PURE__*/React.createElement("ul", null, getLinks(links), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
    href: "/#",
    className: "button red"
  }, "Console"))));
};

NavBar.displayName = 'NavBar';
var NavBarDoc;

if (process.env.NODE_ENV !== 'production') {
  // eslint-disable-next-line global-require
  NavBarDoc = require('./doc').doc(NavBar);
}

var NavBarWrapper = NavBarDoc || NavBar;
export { NavBarWrapper as NavBar };