"use strict";

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

var _core = require("@emotion/core");

var _react = require("react");

var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));

var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));

var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _reactRouter = require("react-router");

var _uiThemes = require("@hackoregon/ui-themes");

var _uiBrand = require("@hackoregon/ui-brand");

var _navCaret = _interopRequireDefault(require("../../assets/nav-caret.svg"));

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); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _templateObject11() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  text-decoration: none;\n"]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 15px;\n  right: 20px;\n  width: 0;\n  height: 0;\n  border-left: 15px solid transparent;\n  border-right: 15px solid transparent;\n  border-bottom: 15px solid ", ";\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  height: 8px;\n  margin-left: 5px;\n  padding-bottom: 2px;\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  line-height: unset;\n  margin: 0;\n\n  :hover {\n    color: ", ";\n  }\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  display: inline-grid;\n  text-align: end;\n  align-items: end;\n  background: none;\n  border: none;\n  margin: 0;\n  padding: 0;\n  color: inherit;\n  cursor: pointer;\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  font-weight: 500;\n  font-family: Rubik, sans-serif;\n  font-size: ", "rem;\n  line-height: ", "rem;\n  color: ", ";\n  text-decoration: none;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  display: unset;\n  text-align: unset;\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  display: grid;\n  justify-self: end;\n  grid-template-columns: repeat(4, max-content);\n  grid-gap: ", "rem;\n  justify-items: end;\n  margin: 0;\n  padding: 0;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  display: grid;\n  justify-self: end;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  height: 60px !important;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  max-width: ", "px;\n  margin: 0 auto;\n  display: grid;\n  padding: 8px 20px 0;\n  align-items: center;\n  grid-template-columns: 80px 1fr 645px;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var primary = _uiThemes.BrandColors.primary,
    action = _uiThemes.BrandColors.action;
var menuColor = "#F3F2F3";
var dropdownStyles = {
  marginTop: "30px",
  backgroundColor: menuColor
};
var optionText = {
  fontFamily: "Rubik, sans-serif",
  fontWeight: 500,
  fontSize: "".concat(16 / _uiThemes.defaultFontSize, "rem"),
  lineHeight: "".concat(37 / _uiThemes.defaultFontSize, "rem"),
  color: primary.hex
};

var contentWrapper = function contentWrapper(props) {
  return (0, _core.css)(_templateObject(), props.greatestWidth);
};

var logoStyle = (0, _core.css)(_templateObject2());
var navStyle = (0, _core.css)(_templateObject3());
var linkContainer = (0, _core.css)(_templateObject4(), 48 / _uiThemes.defaultFontSize);
var listStyle = (0, _core.css)(_templateObject5());
var linkStyle = (0, _core.css)(_templateObject6(), 24 / _uiThemes.defaultFontSize, 28 / _uiThemes.defaultFontSize, primary.hex);
var menuButton = (0, _core.css)(_templateObject7(), linkStyle);
var buttonText = (0, _core.css)(_templateObject8(), action.hex);
var caratStyle = (0, _core.css)(_templateObject9());
var arrowUp = (0, _core.css)(_templateObject10(), menuColor);
var menuLink = (0, _core.css)(_templateObject11(), primary.hex);

var FullNav = function FullNav(props) {
  var _useState = (0, _react.useState)(false),
      _useState2 = _slicedToArray(_useState, 2),
      joinOpen = _useState2[0],
      setJoinOpen = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = _slicedToArray(_useState3, 2),
      aboutOpen = _useState4[0],
      setAboutOpen = _useState4[1];

  var joinAnchorRef = (0, _react.useRef)(null);
  var aboutAnchorRef = (0, _react.useRef)(null);

  function handleJoinToggle() {
    setJoinOpen(function (prevOpen) {
      return !prevOpen;
    });
  }

  function handleAboutToggle() {
    setAboutOpen(function (prevOpen) {
      return !prevOpen;
    });
  }

  function handleJoinClose(event) {
    if (joinAnchorRef.current && joinAnchorRef.current.contains(event.target)) {
      return;
    }

    setJoinOpen(false);
  }

  function handleAboutClose(event) {
    if (aboutAnchorRef.current && aboutAnchorRef.current.contains(event.target)) {
      return;
    }

    setAboutOpen(false);
  }

  return (0, _core.jsx)("div", {
    css: contentWrapper(props)
  }, (0, _core.jsx)(_reactRouter.Link, {
    to: "/"
  }, (0, _core.jsx)(_uiBrand.Logo, {
    alt: "CIVIC home page",
    css: logoStyle,
    type: "squareLogo"
  })), (0, _core.jsx)("div", null), (0, _core.jsx)("nav", {
    css: navStyle,
    "aria-label": "Site"
  }, (0, _core.jsx)("ul", {
    css: linkContainer
  }, (0, _core.jsx)("li", {
    css: listStyle
  }, (0, _core.jsx)(_reactRouter.Link, {
    to: "/cards",
    css: linkStyle
  }, "EXPLORE CIVIC")), (0, _core.jsx)("li", {
    css: listStyle
  }, (0, _core.jsx)("button", {
    css: menuButton,
    type: "button",
    ref: joinAnchorRef,
    "aria-controls": "menu-list-grow",
    "aria-haspopup": "true",
    onClick: handleJoinToggle
  }, (0, _core.jsx)("p", {
    css: buttonText
  }, "JOIN THE MOVEMENT", (0, _core.jsx)("span", null, (0, _core.jsx)("img", {
    css: caratStyle,
    src: _navCaret["default"],
    alt: ""
  })))), (0, _core.jsx)(_Popper["default"], {
    open: joinOpen,
    anchorEl: joinAnchorRef.current,
    transition: true,
    disablePortal: true
  }, function (_ref) {
    var TransitionProps = _ref.TransitionProps,
        placement = _ref.placement;
    return (0, _core.jsx)(_Grow["default"], _extends({}, TransitionProps, {
      style: _objectSpread({
        transformOrigin: placement === "bottom" ? "center top" : "center bottom"
      }, dropdownStyles)
    }), (0, _core.jsx)(_Paper["default"], {
      id: "menu-list-grow",
      square: true
    }, (0, _core.jsx)("div", {
      css: arrowUp
    }), (0, _core.jsx)(_ClickAwayListener["default"], {
      onClickAway: handleJoinClose
    }, (0, _core.jsx)(_MenuList["default"], null, (0, _core.jsx)(_MenuItem["default"], {
      onClick: handleJoinClose,
      style: optionText,
      dense: true
    }, (0, _core.jsx)(_reactRouter.Link, {
      to: {
        pathname: "/",
        hash: "#work-with-us"
      },
      css: menuLink
    }, "Work With Us")), (0, _core.jsx)(_MenuItem["default"], {
      onClick: handleJoinClose,
      style: optionText,
      dense: true
    }, (0, _core.jsx)(_reactRouter.Link, {
      to: {
        pathname: "/",
        hash: "#become-a-contributor"
      },
      css: menuLink
    }, "Become a Contributor"))))));
  })), (0, _core.jsx)("li", {
    css: listStyle
  }, (0, _core.jsx)("button", {
    css: menuButton,
    type: "button",
    ref: aboutAnchorRef,
    "aria-controls": "menu-list-grow",
    "aria-haspopup": "true",
    onClick: handleAboutToggle
  }, (0, _core.jsx)("p", {
    css: buttonText
  }, "ABOUT", (0, _core.jsx)("span", null, (0, _core.jsx)("img", {
    css: caratStyle,
    src: _navCaret["default"],
    alt: ""
  })))), (0, _core.jsx)(_Popper["default"], {
    open: aboutOpen,
    anchorEl: aboutAnchorRef.current,
    transition: true,
    disablePortal: true
  }, function (_ref2) {
    var TransitionProps = _ref2.TransitionProps,
        placement = _ref2.placement;
    return (0, _core.jsx)(_Grow["default"], _extends({}, TransitionProps, {
      style: _objectSpread({
        transformOrigin: placement === "bottom" ? "center top" : "center bottom"
      }, dropdownStyles)
    }), (0, _core.jsx)(_Paper["default"], {
      id: "menu-list-grow",
      square: true
    }, (0, _core.jsx)("div", {
      css: arrowUp
    }), (0, _core.jsx)(_ClickAwayListener["default"], {
      onClickAway: handleAboutClose
    }, (0, _core.jsx)(_MenuList["default"], null, (0, _core.jsx)(_MenuItem["default"], {
      onClick: handleAboutClose,
      style: optionText,
      dense: true
    }, (0, _core.jsx)(_reactRouter.Link, {
      to: {
        pathname: "/",
        hash: "#civic-platform"
      },
      css: menuLink
    }, "Civic Platform")), (0, _core.jsx)(_MenuItem["default"], {
      onClick: handleAboutClose,
      style: optionText,
      dense: true
    }, (0, _core.jsx)(_reactRouter.Link, {
      to: {
        pathname: "/",
        hash: "#civic-software-foundation"
      },
      css: menuLink
    }, "Civic Software Foundation"))))));
  })), (0, _core.jsx)("li", {
    css: listStyle
  }, (0, _core.jsx)(_reactRouter.Link, {
    to: {
      pathname: "/",
      hash: "#contact-us"
    },
    css: linkStyle
  }, "CONTACT")))));
};

var _default = FullNav;
exports["default"] = _default;