"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

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

var _pictogramsReact = require("@wfp/pictograms-react");

var _iconsReact = require("@wfp/icons-react");

var _Button = _interopRequireDefault(require("../Button"));

var _User = _interopRequireDefault(require("../User"));

var _Wrapper = _interopRequireDefault(require("../Wrapper"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _js = require("../../globals/js");

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

var prefix = _js.settings.prefix;

var LanguageExternal = function LanguageExternal(_ref) {
  var children = _ref.children,
      primaryLanguage = _ref.primaryLanguage;
  var ref = (0, _react.useRef)();
  var languageTogglable = (0, _hooks.useTogglable)();
  (0, _react.useEffect)(function () {
    var checkIfClickedOutside = function checkIfClickedOutside(e) {
      // If the menu is open and the clicked target is not within the menu,
      // then close the menu
      if (languageTogglable.isOpen && ref.current && !ref.current.contains(e.target)) {
        languageTogglable.close();
      }
    };

    document.addEventListener("mousedown", checkIfClickedOutside);
    return function () {
      // Cleanup the event listener
      document.removeEventListener("mousedown", checkIfClickedOutside);
    };
  }, [languageTogglable.isOpen]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--language-ext"),
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--language-ext__trigger"),
    onClick: function onClick() {
      return languageTogglable.isOpen ? languageTogglable.close() : languageTogglable.open();
    }
  }, /*#__PURE__*/_react.default.createElement("span", null, primaryLanguage), languageTogglable.isOpen ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUpGlyph, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDownGlyph, null)), /*#__PURE__*/_react.default.createElement("ul", {
    className: "".concat(prefix, "--language-ext__dropdown ").concat(languageTogglable.isOpen ? 'wfp--language-ext__dropdown--is-shown' : '')
  }, children));
};

var UserExternal = function UserExternal(_ref2) {
  var username = _ref2.username,
      children = _ref2.children,
      userImage = _ref2.userImage;
  var ref = (0, _react.useRef)();
  var userTogglable = (0, _hooks.useTogglable)();
  (0, _react.useEffect)(function () {
    var checkIfClickedOutside = function checkIfClickedOutside(e) {
      // If the menu is open and the clicked target is not within the menu,
      // then close the menu
      if (userTogglable.isOpen && ref.current && !ref.current.contains(e.target)) {
        userTogglable.close();
      }
    };

    document.addEventListener("mousedown", checkIfClickedOutside);
    return function () {
      // Cleanup the event listener
      document.removeEventListener("mousedown", checkIfClickedOutside);
    };
  }, [userTogglable.isOpen]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--user-ext"),
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--user-ext__trigger"),
    onClick: function onClick() {
      return userTogglable.isOpen ? userTogglable.close() : userTogglable.open();
    }
  }, /*#__PURE__*/_react.default.createElement(_User.default, {
    alt: "User avatar",
    name: username,
    image: userImage
  }), userTogglable.isOpen ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUpGlyph, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDownGlyph, null)), /*#__PURE__*/_react.default.createElement("ul", {
    className: "".concat(prefix, "--user-ext__dropdown ").concat(userTogglable.isOpen ? 'wfp--user-ext__dropdown--is-shown' : '')
  }, children));
};

var MainNavigationExternal = function MainNavigationExternal(_ref3) {
  var productName = _ref3.productName,
      primaryLanguage = _ref3.primaryLanguage,
      languageList = _ref3.languageList,
      username = _ref3.username,
      userImage = _ref3.userImage,
      userDetails = _ref3.userDetails,
      children = _ref3.children;
  var ref = (0, _react.useRef)();
  var navTogglable = (0, _hooks.useTogglable)();
  (0, _react.useEffect)(function () {
    var checkIfClickedOutside = function checkIfClickedOutside(e) {
      // If the menu is open and the clicked target is not within the menu,
      // then close the menu
      if (navTogglable.isOpen && ref.current && !ref.current.contains(e.target)) {
        navTogglable.close();
      }
    };

    document.addEventListener("mousedown", checkIfClickedOutside);
    return function () {
      // Cleanup the event listener
      document.removeEventListener("mousedown", checkIfClickedOutside);
    };
  }, [navTogglable.isOpen]);
  return /*#__PURE__*/_react.default.createElement("header", {
    className: "".concat(prefix, "--main-navigation-ext")
  }, /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
    pageWidth: "lg",
    className: "".concat(prefix, "--main-navigation-ext__wrapper")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__branding")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__wfp-logo")
  }, /*#__PURE__*/_react.default.createElement(_pictogramsReact.WfpLogoVerticalEn, {
    className: "".concat(prefix, "--main-navigation-ext__wfp-logo-svg"),
    alt: "WFP",
    width: "100%"
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__product-name")
  }, productName)), /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__main")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__settings")
  }, /*#__PURE__*/_react.default.createElement(LanguageExternal, {
    primaryLanguage: primaryLanguage
  }, languageList), /*#__PURE__*/_react.default.createElement(UserExternal, {
    username: username,
    userImage: userImage
  }, userDetails)), /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__nav"),
    ref: ref
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__mobile-menu-button")
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    kind: "tertiary",
    small: true,
    onClick: function onClick() {
      return navTogglable.isOpen ? navTogglable.close() : navTogglable.open();
    }
  }, "Menu")), /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__nav-wrapper\n            ").concat(navTogglable.isOpen ? 'wfp--main-navigation-ext--is-shown' : '')
  }, /*#__PURE__*/_react.default.createElement("nav", {
    className: "".concat(prefix, "--main-navigation-ext__site-nav ").concat(navTogglable.isOpen ? 'wfp--main-navigation-ext--is-shown' : '')
  }, /*#__PURE__*/_react.default.createElement("ul", {
    className: "".concat(prefix, "--main-navigation-ext__site-nav-list")
  }, children, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__mobile-settings")
  }, /*#__PURE__*/_react.default.createElement("li", {
    className: "".concat(prefix, "--main-navigation-ext__site-link")
  }, /*#__PURE__*/_react.default.createElement(LanguageExternal, {
    primaryLanguage: primaryLanguage
  }, languageList)), /*#__PURE__*/_react.default.createElement("li", {
    className: "".concat(prefix, "--main-navigation-ext__site-link")
  }, /*#__PURE__*/_react.default.createElement(UserExternal, {
    username: username,
    userImage: userImage
  }, userDetails))))))))));
};

MainNavigationExternal.propTypes = {
  /**
   * The name of your product can be applied to this prop
   */
  productName: _propTypes.default.node,

  /**
   * The CSS class name to be placed on the wrapping element.
   */
  className: _propTypes.default.string,

  /**
   * List of laguages your site support
   */
  languageList: _propTypes.default.node,

  /**
   * The name of signed in user can be applied to this prop
   */
  username: _propTypes.default.node,

  /**
   * The image of signed in user can be applied to this prop
   */
  userImage: _propTypes.default.string,

  /**
   * The dropdown details of user can be applied to this prop
   */
  userDetails: _propTypes.default.node,

  /**
   * This prop accepts the first language your website is in. Default: English
   */
  primaryLanguage: _propTypes.default.string
};
MainNavigationExternal.defaultProps = {
  primaryLanguage: 'English'
};
var _default = MainNavigationExternal;
exports.default = _default;