"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

var _Button = require("../Button");

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

var _Typography = require("../Typography");

var _IconClose = require("../Icons/IconClose");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;

// TODO: make only the content inside the modal focusable: WAI-ARIA standards
var Modal = function Modal(_ref) {
  var open = _ref.open,
      position = _ref.position,
      maxWidth = _ref.maxWidth,
      width = _ref.width,
      title = _ref.title,
      titleStyle = _ref.titleStyle,
      subTitle = _ref.subTitle,
      noContentPadding = _ref.noContentPadding,
      children = _ref.children,
      handleClose = _ref.handleClose,
      withBottomOffset = _ref.withBottomOffset,
      _ref$background = _ref.background,
      background = _ref$background === void 0 ? 'secondary' : _ref$background,
      _ref$full = _ref.full,
      full = _ref$full === void 0 ? false : _ref$full,
      containerRef = _ref.containerRef,
      _ref$smallPadding = _ref.smallPadding,
      smallPadding = _ref$smallPadding === void 0 ? false : _ref$smallPadding,
      _ref$noTitlePadding = _ref.noTitlePadding,
      noTitlePadding = _ref$noTitlePadding === void 0 ? false : _ref$noTitlePadding,
      _ref$hideHeader = _ref.hideHeader,
      hideHeader = _ref$hideHeader === void 0 ? false : _ref$hideHeader,
      _ref$bottomOnMobile = _ref.bottomOnMobile,
      bottomOnMobile = _ref$bottomOnMobile === void 0 ? false : _ref$bottomOnMobile,
      _ref$borderRadius = _ref.borderRadius,
      borderRadius = _ref$borderRadius === void 0 ? 'small' : _ref$borderRadius,
      isCookies = _ref.isCookies;

  var _useConfigState = (0, _lib.useConfigState)(),
      theme = _useConfigState.theme;

  var palette = theme.palette;
  return /*#__PURE__*/_react["default"].createElement(_lib.Modal, {
    open: open,
    onClose: function onClose() {
      return handleClose();
    }
  }, /*#__PURE__*/_react["default"].createElement(ModalContainer, {
    onMouseDown: handleClose,
    position: position,
    withBottomOffset: withBottomOffset,
    background: palette[background],
    full: full,
    bottomOnMobile: bottomOnMobile
  }, /*#__PURE__*/_react["default"].createElement(_lib.OverflowHidden, null), /*#__PURE__*/_react["default"].createElement(ModalContentWrapper, {
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    onMouseDown: function onMouseDown(e) {
      return e.stopPropagation();
    },
    maxWidth: maxWidth,
    width: width,
    position: position,
    ref: containerRef,
    withBottomOffset: withBottomOffset,
    full: full,
    "data-border-radius": position === 'edge' ? 'none' : borderRadius,
    bottomOnMobile: bottomOnMobile
  }, !hideHeader && /*#__PURE__*/_react["default"].createElement(ModalTitleContainer, null, /*#__PURE__*/_react["default"].createElement(ModalTitleWrapper, {
    full: full,
    noPadding: noTitlePadding
  }, !isCookies && /*#__PURE__*/_react["default"].createElement(CloseButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
    variant: "light",
    bordered: true,
    small: true,
    onClick: handleClose,
    borderRadius: "circle",
    icon: /*#__PURE__*/_react["default"].createElement(_IconClose.IconClose, null)
  })), title && /*#__PURE__*/_react["default"].createElement(ModalTitle, {
    titleStyle: titleStyle
  }, title), subTitle && /*#__PURE__*/_react["default"].createElement(ModalSubtitle, null, subTitle))), /*#__PURE__*/_react["default"].createElement(ModalContent, {
    position: position,
    noPadding: noContentPadding,
    smallPadding: smallPadding,
    withBottomOffset: withBottomOffset
  }, children))));
};

exports.Modal = Modal;

var ModalContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  overflow: auto;\n  display: flex;\n\n  transition: all 0.3s ease;\n\n  justify-content: center;\n  align-items: ", ";\n  position: fixed;\n  top: ", ";\n  left: 0;\n  width: 100vw;\n  height: 100%;\n  max-height: 100%;\n  z-index: 99;\n  box-sizing: inherit;\n  /* background-color: ", "; */\n  @media (max-width: ", ") {\n    top: ", ";\n\n    ", "\n  }\n  &::before {\n    content: '';\n    right: 0;\n    bottom: 0;\n    background: ", ";\n    position: fixed;\n    top: 0;\n    left: 0;\n    height: 100%;\n  }\n"])), function (props) {
  return props.position === 'top' ? 'baseline' : 'center';
}, function (props) {
  return props.position === 'top' ? '6rem' : 0;
}, function (props) {
  return props.background || 'transparent';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.max;
}, function (props) {
  return props.position === 'top' ? '1rem' : 0;
}, function (props) {
  return props.bottomOnMobile ? 'align-items: flex-end;' : '';
}, function (props) {
  return props.full ? props.background : 'rgba(34, 34, 34, 0.5)';
});

var CloseButtonContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 1.4rem;\n  right: 1.2rem;\n\n  @media (min-width: ", ") {\n    top: 2rem;\n    right: 2.6rem;\n  }\n\n  & button {\n    padding: 0;\n    min-width: 3rem;\n    min-height: 3rem;\n    max-width: 3rem;\n    max-height: 3rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-width: 0;\n  }\n\n  & span {\n    position: static;\n  }\n\n  & svg {\n    height: 1.2rem;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
});

var ModalContentWrapper = _styledComponents["default"].div.attrs({
  className: 'p-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-height: ", ";\n  height: ", ";\n\n  transition: all 0.3s ease;\n\n  max-width: ", ";\n  width: ", ";\n  position: relative;\n  min-width: 10rem;\n  overflow: auto;\n  box-shadow: 0 0 1.6rem 0.4rem rgba(0, 0, 0, 0.08);\n  background: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n    padding-bottom: 0;\n  }\n\n  @media (max-width: ", ") {\n    ", "\n  }\n\n  ", "\n"])), function (props) {
  return props.position === 'edge' ? '100%' : 'min(80rem, calc(100% - 4rem))';
}, function (props) {
  return props.position === 'edge' ? '100%' : 'auto';
}, function (props) {
  return props.maxWidth ? props.maxWidth : '78.5rem';
}, function (props) {
  return props.width ? props.width : 'calc(100% - 2rem)';
}, function (props) {
  return props.withBottomOffset ? 'transparent' : props.theme.palette.secondary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.position === 'edge' || props.full ? '100vw' : 'calc(100% - 2.4rem)';
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.bottomOnMobile && "\n      border-bottom-left-radius: 0 !important;\n      border-bottom-right-radius: 0 !important;\n    ";
}, function (props) {
  return props.full && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      max-height: none;\n      height: 100vh;\n      box-shadow: none;\n      width: 100vw;\n      max-width: none;\n    "])));
});

var ModalTitleContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 3;\n"])));

var ModalTitleWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", ";\n  background: ", ";\n  transition: box-shadow 0.5s;\n\n  @media (min-width: ", ") {\n    padding-left: 4.8rem;\n  }\n\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n"])), function (props) {
  return props.full || props.noPadding ? '' : 'padding: 2.4rem 2.4rem 1.2rem';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.secondary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.breakpoints.md.max;
}, function (props) {
  return props.noPadding ? 0 : '1.2rem 3.6rem 1.2rem 1.6rem';
});

var ModalTitle = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  as: 'h2'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: ", ";\n  font-size: 1.8rem;\n  line-height: 1.55;\n"])), function (props) {
  return props.titleStyle == 'normal' ? 'normal' : 'bold';
});
var ModalSubtitle = (0, _styledComponents["default"])(_Typography.Typography).attrs({
  as: 'h3',
  variant: 'base'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ModalContent = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding: ", ";\n  width: 100%;\n  box-sizing: border-box;\n  background: ", ";\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n  @media (max-width: ", ") {\n    padding: ", ";\n  }\n  ", "\n  ", ";\n"])), function (props) {
  return props.noPadding ? 0 : '2.4rem';
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.secondary;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  if (props.noPadding) return 0;
  if (props.smallPadding) return '2.4rem';
  return '2.4rem 4.8rem';
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.breakpoints.md.max;
}, function (props) {
  if (props.noPadding) return 0;
  if (props.smallPadding) return '2.4rem';
  return '1.2rem';
}, function (props) {
  return props.withBottomOffset && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      height: 100%;\n      padding-bottom: 6rem !important;\n    "])));
}, function (props) {
  return props.position === 'edge' && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      @media (min-width: ", ") {\n        transform: translateY(calc(50% - 100px));\n      }\n    "])), function (_ref12) {
    var theme = _ref12.theme;
    return theme.breakpoints.lg.min;
  });
});

function e(e) {
  throw new Error('Function not implemented.');
}
//# sourceMappingURL=index.js.map