import React from 'react';
import { useEffect, useRef } from "react";
import { WfpLogoVerticalEn } from '@wfp/pictograms-react';
import { ChevronDownGlyph, ChevronUpGlyph } from '@wfp/icons-react';
import Button from '../Button';
import User from '../User';
import Wrapper from '../Wrapper';
import PropTypes from 'prop-types';
import { useTogglable } from '../../hooks';
import { settings } from '../../globals/js';
var prefix = settings.prefix;

var LanguageExternal = function LanguageExternal(_ref) {
  var children = _ref.children,
      primaryLanguage = _ref.primaryLanguage;
  var ref = useRef();
  var languageTogglable = useTogglable();
  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.createElement("div", {
    className: "".concat(prefix, "--language-ext"),
    ref: ref
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--language-ext__trigger"),
    onClick: function onClick() {
      return languageTogglable.isOpen ? languageTogglable.close() : languageTogglable.open();
    }
  }, /*#__PURE__*/React.createElement("span", null, primaryLanguage), languageTogglable.isOpen ? /*#__PURE__*/React.createElement(ChevronUpGlyph, null) : /*#__PURE__*/React.createElement(ChevronDownGlyph, null)), /*#__PURE__*/React.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 = useRef();
  var userTogglable = useTogglable();
  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.createElement("div", {
    className: "".concat(prefix, "--user-ext"),
    ref: ref
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--user-ext__trigger"),
    onClick: function onClick() {
      return userTogglable.isOpen ? userTogglable.close() : userTogglable.open();
    }
  }, /*#__PURE__*/React.createElement(User, {
    alt: "User avatar",
    name: username,
    image: userImage
  }), userTogglable.isOpen ? /*#__PURE__*/React.createElement(ChevronUpGlyph, null) : /*#__PURE__*/React.createElement(ChevronDownGlyph, null)), /*#__PURE__*/React.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 = useRef();
  var navTogglable = useTogglable();
  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.createElement("header", {
    className: "".concat(prefix, "--main-navigation-ext")
  }, /*#__PURE__*/React.createElement(Wrapper, {
    pageWidth: "lg",
    className: "".concat(prefix, "--main-navigation-ext__wrapper")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__branding")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__wfp-logo")
  }, /*#__PURE__*/React.createElement(WfpLogoVerticalEn, {
    className: "".concat(prefix, "--main-navigation-ext__wfp-logo-svg"),
    alt: "WFP",
    width: "100%"
  })), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__product-name")
  }, productName)), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__main")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__settings")
  }, /*#__PURE__*/React.createElement(LanguageExternal, {
    primaryLanguage: primaryLanguage
  }, languageList), /*#__PURE__*/React.createElement(UserExternal, {
    username: username,
    userImage: userImage
  }, userDetails)), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__nav"),
    ref: ref
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__mobile-menu-button")
  }, /*#__PURE__*/React.createElement(Button, {
    kind: "tertiary",
    small: true,
    onClick: function onClick() {
      return navTogglable.isOpen ? navTogglable.close() : navTogglable.open();
    }
  }, "Menu")), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__nav-wrapper\n            ").concat(navTogglable.isOpen ? 'wfp--main-navigation-ext--is-shown' : '')
  }, /*#__PURE__*/React.createElement("nav", {
    className: "".concat(prefix, "--main-navigation-ext__site-nav ").concat(navTogglable.isOpen ? 'wfp--main-navigation-ext--is-shown' : '')
  }, /*#__PURE__*/React.createElement("ul", {
    className: "".concat(prefix, "--main-navigation-ext__site-nav-list")
  }, children, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--main-navigation-ext__mobile-settings")
  }, /*#__PURE__*/React.createElement("li", {
    className: "".concat(prefix, "--main-navigation-ext__site-link")
  }, /*#__PURE__*/React.createElement(LanguageExternal, {
    primaryLanguage: primaryLanguage
  }, languageList)), /*#__PURE__*/React.createElement("li", {
    className: "".concat(prefix, "--main-navigation-ext__site-link")
  }, /*#__PURE__*/React.createElement(UserExternal, {
    username: username,
    userImage: userImage
  }, userDetails))))))))));
};

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

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

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

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

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

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

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