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

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

import React from 'react';
import styled, { css } from 'styled-components';
import { Button } from '../Button';
import { OverflowHidden, Modal as LibModal, useConfigState } from '@sentecacommerce-theme/lib';
import { Typography } from '../Typography';
import { IconClose } from '../Icons/IconClose'; // TODO: make only the content inside the modal focusable: WAI-ARIA standards

export var Modal = (_ref) => {
  var {
    open,
    position,
    maxWidth,
    width,
    title,
    titleStyle,
    subTitle,
    noContentPadding,
    children,
    handleClose,
    withBottomOffset,
    background = 'secondary',
    full = false,
    containerRef,
    smallPadding = false,
    noTitlePadding = false,
    hideHeader = false,
    bottomOnMobile = false,
    borderRadius = 'small',
    isCookies
  } = _ref;
  var {
    theme
  } = useConfigState();
  var palette = theme.palette;
  return /*#__PURE__*/React.createElement(LibModal, {
    open: open,
    onClose: () => handleClose()
  }, /*#__PURE__*/React.createElement(ModalContainer, {
    onMouseDown: handleClose,
    position: position,
    withBottomOffset: withBottomOffset,
    background: palette[background],
    full: full,
    bottomOnMobile: bottomOnMobile
  }, /*#__PURE__*/React.createElement(OverflowHidden, null), /*#__PURE__*/React.createElement(ModalContentWrapper, {
    onClick: e => e.stopPropagation(),
    onMouseDown: e => 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.createElement(ModalTitleContainer, null, /*#__PURE__*/React.createElement(ModalTitleWrapper, {
    full: full,
    noPadding: noTitlePadding
  }, !isCookies && /*#__PURE__*/React.createElement(CloseButtonContainer, null, /*#__PURE__*/React.createElement(Button, {
    variant: "light",
    bordered: true,
    small: true,
    onClick: handleClose,
    borderRadius: "circle",
    icon: /*#__PURE__*/React.createElement(IconClose, null)
  })), title && /*#__PURE__*/React.createElement(ModalTitle, {
    titleStyle: titleStyle
  }, title), subTitle && /*#__PURE__*/React.createElement(ModalSubtitle, null, subTitle))), /*#__PURE__*/React.createElement(ModalContent, {
    position: position,
    noPadding: noContentPadding,
    smallPadding: smallPadding,
    withBottomOffset: withBottomOffset
  }, children))));
};
var ModalContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.position === 'top' ? 'baseline' : 'center', props => props.position === 'top' ? '6rem' : 0, props => props.background || 'transparent', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
}, props => props.position === 'top' ? '1rem' : 0, props => props.bottomOnMobile ? 'align-items: flex-end;' : '', props => props.full ? props.background : 'rgba(34, 34, 34, 0.5)');
var CloseButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var ModalContentWrapper = styled.div.attrs({
  className: 'p-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), props => props.position === 'edge' ? '100%' : 'min(80rem, calc(100% - 4rem))', props => props.position === 'edge' ? '100%' : 'auto', props => props.maxWidth ? props.maxWidth : '78.5rem', props => props.width ? props.width : 'calc(100% - 2rem)', props => props.withBottomOffset ? 'transparent' : props.theme.palette.secondary, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
}, props => props.position === 'edge' || props.full ? '100vw' : 'calc(100% - 2.4rem)', (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.lg.min;
}, props => props.bottomOnMobile && "\n      border-bottom-left-radius: 0 !important;\n      border-bottom-right-radius: 0 !important;\n    ", props => props.full && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      max-height: none;\n      height: 100vh;\n      box-shadow: none;\n      width: 100vw;\n      max-width: none;\n    "]))));
var ModalTitleContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  left: 0;\n  z-index: 3;\n"])));
var ModalTitleWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), props => props.full || props.noPadding ? '' : 'padding: 2.4rem 2.4rem 1.2rem', (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.secondary;
}, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.breakpoints.md.max;
}, props => props.noPadding ? 0 : '1.2rem 3.6rem 1.2rem 1.6rem');
var ModalTitle = styled(Typography).attrs({
  as: 'h2'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-size: 1.8rem;\n  line-height: 1.55;\n"])), props => props.titleStyle == 'normal' ? 'normal' : 'bold');
var ModalSubtitle = styled(Typography).attrs({
  as: 'h3',
  variant: 'base'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
var ModalContent = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\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"])), props => props.noPadding ? 0 : '2.4rem', (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.secondary;
}, (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.breakpoints.lg.min;
}, props => {
  if (props.noPadding) return 0;
  if (props.smallPadding) return '2.4rem';
  return '2.4rem 4.8rem';
}, (_ref11) => {
  var {
    theme
  } = _ref11;
  return theme.breakpoints.md.max;
}, props => {
  if (props.noPadding) return 0;
  if (props.smallPadding) return '2.4rem';
  return '1.2rem';
}, props => props.withBottomOffset && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      padding-bottom: 6rem !important;\n    "]))), props => props.position === 'edge' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      @media (min-width: ", ") {\n        transform: translateY(calc(50% - 100px));\n      }\n    "])), (_ref12) => {
  var {
    theme
  } = _ref12;
  return theme.breakpoints.lg.min;
}));

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