"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NavDropdown = NavDropdown;

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

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

var _reactRouterDom = require("react-router-dom");

var _hooks = require("../../hooks");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var defaultRenderer = function defaultRenderer(props) {
  return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, _extends({
    to: props.path
  }, props), props.text);
};

function NavDropdown(_ref) {
  var id = _ref.id,
      text = _ref.text,
      _ref$children = _ref.children,
      children = _ref$children === void 0 ? [] : _ref$children,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'primary' : _ref$type,
      _ref$active = _ref.active,
      active = _ref$active === void 0 ? false : _ref$active;

  var _useHideOnLostFocus = (0, _hooks.useHideOnLostFocus)(),
      ref = _useHideOnLostFocus.ref,
      isComponentVisible = _useHideOnLostFocus.isComponentVisible,
      setIsComponentVisible = _useHideOnLostFocus.setIsComponentVisible;

  return /*#__PURE__*/_react.default.createElement("li", {
    className: "usa-nav__".concat(type, "-item"),
    key: id
  }, /*#__PURE__*/_react.default.createElement("span", {
    id: text,
    className: "display-inline-block with-dropdown",
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("button", {
    "aria-expanded": isComponentVisible,
    "aria-controls": id,
    "aria-haspopup": "true",
    className: 'usa-nav__link' + (active ? ' usa-current' : ''),
    onClick: function onClick() {
      return setIsComponentVisible(function (s) {
        return !s;
      });
    }
  }, text), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)({
      'display-none': !isComponentVisible
    }, 'dropdown')
  }, /*#__PURE__*/_react.default.createElement("ul", {
    id: id,
    hidden: !isComponentVisible
  }, children.map(function (c, index) {
    return /*#__PURE__*/_react.default.createElement("li", {
      key: index,
      className: "option",
      onClick: function onClick() {
        return setIsComponentVisible(false);
      }
    }, c.renderer ? c.renderer(c) : defaultRenderer(c));
  })))));
}