"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Navbar = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
require("../styles/main.css");
require("../styles/type.css");
require("../styles/navbar.css");
require("../styles/popover.css");
var _UseWindowDimensions = require("./UseWindowDimensions");
var _Button = require("./Button");
var _reactTinyPopover = require("react-tiny-popover");
var _Padder = require("./Padder");
var Navbar = function Navbar(_ref) {
  var logo = _ref.logo,
    title = _ref.title,
    homeLink = _ref.homeLink,
    loginLink = _ref.loginLink,
    signupLink = _ref.signupLink,
    menu = _ref.menu,
    withAuth = _ref.withAuth,
    authMenu = _ref.authMenu,
    user = _ref.user,
    customElements = _ref.customElements;
  var _useWindowDimensions = (0, _UseWindowDimensions.useWindowDimensions)(),
    width = _useWindowDimensions.width;
  var _useState = (0, _react.useState)(menu.map(function (link) {
      if (link.hasOwnProperty('subs')) {
        return {
          name: link.name,
          link: link.link,
          subs: link.subs,
          open: false
        };
      } else {
        return link;
      }
    })),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    links = _useState2[0],
    setLinks = _useState2[1];
  var _useState3 = (0, _react.useState)(authMenu.map(function (link) {
      if (link.hasOwnProperty('subs')) {
        return {
          name: link.name,
          link: link.link,
          subs: link.subs,
          open: false
        };
      } else {
        return link;
      }
    })),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    authLinks = _useState4[0],
    setAuthLinks = _useState4[1];
  function toggleLink(name) {
    setLinks(links.map(function (link) {
      if (link.name === name) {
        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, link), {}, {
          open: !link.open
        });
      } else {
        return link;
      }
    }));
  }
  function toggleAuthLink(name) {
    setAuthLinks(links.map(function (link) {
      if (link.name === name) {
        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, link), {}, {
          open: !link.open
        });
      } else {
        return link;
      }
    }));
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width > 500 ?
  /*#__PURE__*/
  // Desktop version.
  _react.default.createElement(_react.default.Fragment, null, user ? /*#__PURE__*/_react.default.createElement("div", {
    className: "navbar-desktop sticky-navbar blurred-background"
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginLeft: 36,
      display: "flex",
      alignItems: "center"
    }
  }, /*#__PURE__*/_react.default.createElement("div", null, logo ? /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: homeLink
  }, /*#__PURE__*/_react.default.createElement("img", {
    style: {
      height: 38,
      paddingTop: 10
    },
    src: logo
  })) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: homeLink,
    className: "navbar-link"
  }, /*#__PURE__*/_react.default.createElement("h4", {
    className: "navbar-link",
    style: {
      margin: 0
    }
  }, title))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginLeft: 72
    }
  }, authLinks.map(function (link) {
    if (link.hasOwnProperty('subs')) {
      return /*#__PURE__*/_react.default.createElement(_reactTinyPopover.Popover, {
        isOpen: link.open,
        onClickOutside: function onClickOutside() {
          toggleAuthLink(link.name);
        },
        padding: 10,
        align: "start",
        positions: ['bottom'],
        containerStyle: {
          zIndex: 10
        },
        containerClassName: "popover",
        content: /*#__PURE__*/_react.default.createElement("div", {
          style: {
            width: '250px'
          }
        }, link.subs.map(function (sub) {
          return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
            to: sub.link,
            style: {
              width: '100%'
            }
          }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
            appearance: "minimal",
            isFullWidth: true,
            align: "start",
            style: {
              marginBottom: 4
            }
          }, sub.name));
        }))
      }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
        to: link.link
      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
        appearance: "minimal",
        isActive: link.open,
        onClick: function onClick() {
          toggleAuthLink(link.name);
        },
        style: {
          marginRight: 8
        }
      }, link.name)));
    } else {
      return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
        to: link.link
      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
        appearance: "minimal"
      }, link.name));
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: 36
    }
  })) : /*#__PURE__*/_react.default.createElement("div", {
    className: "navbar-desktop sticky-navbar blurred-background"
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginLeft: 36,
      display: "flex",
      alignItems: "center"
    }
  }, /*#__PURE__*/_react.default.createElement("div", null, logo ? /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: homeLink
  }, /*#__PURE__*/_react.default.createElement("img", {
    style: {
      height: 38,
      paddingTop: 10
    },
    src: logo
  })) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: homeLink
  }, /*#__PURE__*/_react.default.createElement("h4", {
    className: "navbar-link",
    style: {
      margin: 0
    }
  }, title))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginLeft: 72
    }
  }, links.map(function (link) {
    if (link.hasOwnProperty('subs')) {
      return /*#__PURE__*/_react.default.createElement(_reactTinyPopover.Popover, {
        isOpen: link.open,
        onClickOutside: function onClickOutside() {
          toggleLink(link.name);
        },
        padding: 10,
        align: "start",
        positions: ['bottom'],
        containerStyle: {
          zIndex: 10
        },
        containerClassName: "popover",
        content: /*#__PURE__*/_react.default.createElement("div", {
          style: {
            width: '250px'
          }
        }, link.subs.map(function (sub) {
          return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
            to: sub.link,
            style: {
              width: '100%'
            }
          }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
            appearance: "minimal",
            isFullWidth: true,
            align: "start",
            style: {
              marginBottom: 4
            }
          }, sub.name));
        }))
      }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
        to: link.link
      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
        appearance: "minimal",
        isActive: link.open,
        onClick: function onClick() {
          toggleLink(link.name);
        },
        style: {
          marginRight: 8
        }
      }, link.name)));
    } else {
      return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
        to: link.link
      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
        appearance: "minimal"
      }, link.name));
    }
  }))), withAuth && /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: 36
    }
  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: loginLink
  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
    style: {
      marginRight: 8
    }
  }, "Login")), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: signupLink
  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
    appearance: "primary"
  }, "Sign up"))), customElements)) :
  /*#__PURE__*/
  // Mobile version.
  _react.default.createElement(_react.default.Fragment, null, user ? /*#__PURE__*/_react.default.createElement("div", {
    className: ""
  }) : /*#__PURE__*/_react.default.createElement("div", {
    className: "navbar-mobile"
  }, /*#__PURE__*/_react.default.createElement(_Padder.Padder, {
    bottom: "2rem"
  }, logo ? /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: homeLink
  }, /*#__PURE__*/_react.default.createElement("img", {
    style: {
      height: 28,
      paddingTop: 10
    },
    src: logo
  })) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: homeLink
  }, /*#__PURE__*/_react.default.createElement("h4", {
    className: "navbar-link",
    style: {
      margin: 0
    }
  }, title))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      alignItems: "center",
      justifyContent: "center"
    }
  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: loginLink
  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
    style: {
      marginRight: 8
    }
  }, "Login")), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
    to: signupLink
  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
    appearance: "primary"
  }, "Sign up"))))));
};
exports.Navbar = Navbar;
Navbar.defaultProps = {
  homeLink: '/',
  loginLink: '/login',
  signupLink: '/signup',
  menu: [],
  authMenu: [],
  user: null
};