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

import { css, jsx } from "@emotion/core";
import { useState, useRef } from "react";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import Grow from "@material-ui/core/Grow";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import MenuList from "@material-ui/core/MenuList";
import MenuItem from "@material-ui/core/MenuItem";
import { Link } from "react-router";
import { BrandColors, defaultFontSize } from "@hackoregon/ui-themes";
import { Logo } from "@hackoregon/ui-brand";
import navCaret from "../../assets/nav-caret.svg";
var primary = BrandColors.primary,
    action = BrandColors.action;
var menuColor = "#F3F2F3";
var dropdownStyles = {
  marginTop: "30px",
  backgroundColor: menuColor
};
var optionText = {
  fontFamily: "Rubik, sans-serif",
  fontWeight: 500,
  fontSize: "".concat(16 / defaultFontSize, "rem"),
  lineHeight: "".concat(37 / defaultFontSize, "rem"),
  color: primary.hex
};

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

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

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

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

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

export default FullNav;