"use strict";

exports.__esModule = true;
exports.NavBar = void 0;

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _dragonKitIcons = require("@dragonchain-dev/dragon-kit-icons");

var _NavItem = require("../NavItem");

var _LinkTo = require("../LinkTo");

var _DeveloperNavPanel = require("../DeveloperNavPanel");

var _Title = require("../Title");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// add use-memo???
var NavBar = function NavBar(_ref) {
  var links = _ref.links;

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

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

  var getIcon = function getIcon(icon) {
    var Icon = {
      labs: _dragonKitIcons.Labs,
      developer: _dragonKitIcons.Developer,
      enterprise: _dragonKitIcons.Enterprise
    }[icon];
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "icon"
    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.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.default.createElement(_LinkTo.LinkTo, {
        key: name,
        type: type,
        url: url,
        onClick: clickSubnav
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "inner"
      }, item.icon && getIcon(icon), /*#__PURE__*/_react.default.createElement("div", {
        className: "content"
      }, /*#__PURE__*/_react.default.createElement(_Title.Title, {
        tag: "div"
      }, name), description && /*#__PURE__*/_react.default.createElement("p", null, description))));
    });
  };

  var getSubNav = function getSubNav(parent, subnav) {
    var isMega = subnav.isMega,
        developerPanel = subnav.developerPanel,
        navItems = subnav.navItems;
    var subNavClasses = (0, _classnames.default)('subnav', isMega && 'is-mega-menu', displaySubNav && 'show');
    return /*#__PURE__*/_react.default.createElement("div", {
      key: parent,
      className: subNavClasses,
      onBlur: function onBlur() {
        return setDisplaySubNav(false);
      },
      onMouseOut: function onMouseOut() {
        return setDisplaySubNav(false);
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "inner"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "layout"
    }, /*#__PURE__*/_react.default.createElement("nav", {
      className: "subnav-links"
    }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement(_NavItem.NavItem, null, getSubNavItemSet(navItems)))), developerPanel && /*#__PURE__*/_react.default.createElement(_DeveloperNavPanel.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.default.createElement(_NavItem.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.default.createElement(_LinkTo.LinkTo, {
        type: type,
        url: url
      }, name), subnav && getSubNav(name, subnav));
    });
  };

  return /*#__PURE__*/_react.default.createElement("nav", {
    className: "nav"
  }, /*#__PURE__*/_react.default.createElement("ul", null, getLinks(links), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.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;
exports.NavBar = NavBarWrapper;