"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Dropdown = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

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

var _link = _interopRequireDefault(require("next/link"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lib = require("@sentecacommerce-theme/lib");

var _router = require("next/router");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var Dropdown = function Dropdown(_ref) {
  var elements = _ref.elements,
      header = _ref.header,
      url = _ref.url,
      isActive = _ref.isActive;
  var logout = (0, _lib.useLogout)();
  var router = (0, _router.useRouter)();
  return /*#__PURE__*/_react["default"].createElement(DropdownContainer, {
    isOpen: isActive
  }, /*#__PURE__*/_react["default"].createElement(DropdownWrapper, null, /*#__PURE__*/_react["default"].createElement(DropdownInner, {
    className: "p-4 pl-3"
  }, /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: url,
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(DropdownItem, {
    className: "data-jo py-1 px-2",
    isHeader: true
  }, header)), /*#__PURE__*/_react["default"].createElement(DropdownBody, null, elements == null ? void 0 : elements.map(function (element) {
    if ((element == null ? void 0 : element.url) === '/logout') {
      return /*#__PURE__*/_react["default"].createElement("li", {
        key: element.url + "__" + element.label,
        onClick: function onClick() {
          logout();
          router.push('/');
        }
      }, /*#__PURE__*/_react["default"].createElement(DropdownItem, {
        className: "py-1 px-2"
      }, element.label));
    }

    return /*#__PURE__*/_react["default"].createElement(_link["default"], {
      key: element.url + "__" + element.label,
      href: element.url
    }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement(DropdownItem, {
      className: "py-1 px-2"
    }, element.label)));
  })))));
};

exports.Dropdown = Dropdown;

var DropdownContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  min-width: 24rem;\n  right: 0;\n  top: 3.7rem;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-2rem);\n  transition: opacity 0.2s, visibility 0s linear 0.2s, transform 0.25s ease;\n\n  ", "\n  z-index: 99;\n"])), function (props) {
  return props.isOpen && "\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n      transition: opacity .2s,visibility 0s,transform .25s ease;\n    ";
});

var DropdownWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: ", ";\n  border-radius: 0 0 0.8rem 0.8rem;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
});

var DropdownInner = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: block;\n"])));

var DropdownItem = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 500;\n  display: block;\n  font-size: 1.4rem;\n  color: #757575;\n  transition: color 0.3s;\n\n  ", "\n\n  ", "\n"])), function (props) {
  return !props.isHeader && "\n    &:hover {\n      color: " + props.theme.palette.primary + ";\n    }\n    ";
}, function (props) {
  return props.isHeader && "\n    color: " + props.theme.palette.primary + ";\n    font-size: 1.6rem;\n    margin-bottom: 12px;\n    ";
});

var DropdownBody = _styledComponents["default"].ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  list-style: none;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 1.428571;\n"])));
//# sourceMappingURL=index.js.map