import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

/* eslint-disable @typescript-eslint/no-empty-function */
import React from 'react';
import Link from 'next/link';
import styled from 'styled-components';
import { useLogout } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';

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

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

var DropdownContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.isOpen && "\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n      transition: opacity .2s,visibility 0s,transform .25s ease;\n    ");
var DropdownWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  border-radius: 0 0 0.8rem 0.8rem;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
});
var DropdownInner = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
var DropdownItem = styled.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), props => !props.isHeader && "\n    &:hover {\n      color: " + props.theme.palette.primary + ";\n    }\n    ", props => props.isHeader && "\n    color: " + props.theme.palette.primary + ";\n    font-size: 1.6rem;\n    margin-bottom: 12px;\n    ");
var DropdownBody = styled.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  list-style: none;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 1.428571;\n"])));
export { Dropdown };
//# sourceMappingURL=index.js.map