'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var index = require('../../utils/index.js');
var utils = require('./utils.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const animationDuration = 200;
const appear = styled.keyframes `
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;
const disappear = styled.keyframes `
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
`;
const Overlay = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['isOpen']),
}) `
  inset: 0;
  position: fixed;
  background-color: ${index.getColorAlias('overlay')};
  z-index: 5000;

  display: flex;
  justify-content: center;

  ${(props) => props.isOpen
    ? styled.css `
          animation: ${appear} ${animationDuration}ms forwards;
        `
    : styled.css `
          animation: ${disappear} ${animationDuration}ms ${animationDuration}ms
            forwards;
        `}
`;
const Dialog = styled__default['default'].div `
  --height-offset: ${({ position }) => (position === 'top' ? 2 : 1)};
  --dialog-gutter: ${({ variant }) => variant === 'narrow' ? index.getSpacing('s04') : index.getSpacing('s05')};
  max-height: calc(100vh - ${index.getSpacing('s09')} * var(--height-offset));
  width: calc(100vw - 60px);
  max-width: ${({ size }) => utils.getModalSize(size)};
  display: flex;
  flex-direction: column;
  font-family: ${(props) => props.theme.font.familyPrimary};
  background-color: ${index.getColorAlias('backgroundDefault')};
  color: ${index.getColorAlias('contentDefault')};
  position: fixed;
  padding-top: var(--dialog-gutter);
  padding-bottom: var(--dialog-gutter);
  box-shadow: ${(props) => props.theme.elevation.e4};
  outline: none;
  border-radius: ${index.getSpacing('s04')};
  overflow-y: auto;

  ${({ position }) => position === 'center'
    ? styled.css `
          align-self: center;
        `
    : styled.css `
          margin-top: ${index.getSpacing('s10')};
          @media (max-height: 600px) {
            margin-top: 5vh;
          }
        `};
`;
const StyledModalHeader = styled__default['default'].div `
  --header-gutter: ${({ variant }) => variant === 'narrow' ? index.getSpacing('s04') : index.getSpacing('s05')};
  padding-left: var(--header-gutter);
  padding-right: var(--header-gutter);
  position: sticky;
  top: ${index.getSpacing('s00')};

  button {
    position: absolute;
    right: var(--header-gutter);
    top: calc(${index.getSpacing('s02')} * -1);
    width: ${index.getSpacing('s07')};
    height: ${index.getSpacing('s07')};

    svg {
      width: ${index.getSpacing('s05')};
      height: ${index.getSpacing('s05')};
      fill: ${index.getColorAlias('contentDefault')};
    }

    @media print {
      display: none;
    }
  }
`;
const ModalTitle = styled__default['default'].h1.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'hideCloseIcon',
    ]),
}) `
  ${({ variant }) => variant === 'narrow' ? index.getFontSize('size20') : index.getFontSize('size24')}
  color: ${index.getColorAlias('contentDefault')};
  margin-top: ${index.getSpacing('s00')};
  margin-right: ${index.getSpacing('s00')};
  margin-bottom: ${index.getSpacing('s04')};
  margin-left: ${index.getSpacing('s00')};
  font-weight: 800;
  word-break: break-word;

  ${({ hideCloseIcon }) => !hideCloseIcon &&
    styled.css `
      width: calc(100% - ${index.getSpacing('s08')});
    `};

  ${({ mode }) => mode === 'truncated' &&
    styled.css `
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    `};
`;
const StyledModalContent = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'pinnedFooter',
        'stackedActionButtons',
    ]),
}) `
  --content-margin: calc(${index.getSpacing('s10')} - ${index.getSpacing('s01')});
  --content-gutter: ${({ variant }) => variant === 'narrow' ? index.getSpacing('s04') : index.getSpacing('s05')};
  overflow-y: auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);

  ${({ pinnedFooter, action, stackedActionButtons, theme }) => pinnedFooter &&
    action &&
    styled.css `
      margin-bottom: calc(
        var(--content-margin) *
          ${stackedActionButtons && action === 'confirm' ? 2 : 1}
      );

      ${theme.mode === 'light' &&
        styled.css `
        /* Shadow if content is scrollable */
        background: linear-gradient(white 30%, transparent) center top,
          linear-gradient(transparent, white 70%) center bottom,
          radial-gradient(farthest-side at 50% 0, transparent, rgba(0, 0, 0, 0))
            center top,
          radial-gradient(
              farthest-side at 50% 100%,
              rgba(0, 0, 0, 0.3),
              rgba(0, 0, 0, 0)
            )
            center bottom;

        background-repeat: no-repeat;
        background-size: 100% 40px, 100% 40px, 100% 14px, 110% 14px;
        background-attachment: local, local, scroll, scroll;
      `}
    `};
`;
const ModalFooter = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'pinnedFooter',
        'stackedActionButtons',
    ]),
}) `
  display: flex;
  box-sizing: initial;

  ${({ stackedActionButtons }) => stackedActionButtons
    ? styled.css `
          flex-direction: column;
          justify-content: center;

          button {
            &:not(:last-child) {
              margin-bottom: ${index.getSpacing('s04')};
            }
          }
        `
    : styled.css `
          justify-content: flex-end;

          button {
            &:not(:last-child) {
              margin-right: ${index.getSpacing('s04')};
            }
          }
        `}

  ${({ pinnedFooter, variant }) => pinnedFooter
    ? styled.css `
          --footer-gutter: ${variant === 'narrow'
        ? index.getSpacing('s04')
        : index.getSpacing('s05')};
          position: absolute;
          bottom: 0;
          left: 0;
          width: calc(100% - var(--footer-gutter) * 2);
          padding: var(--footer-gutter);
        `
    : styled.css `
          margin-top: ${index.getSpacing('s05')};
        `}
`;
const ModalLoadingWrapper = styled__default['default'].div `
  display: flex;
  align-items: center;
  justify-content: center;
  height: 188px;
`;

exports.Dialog = Dialog;
exports.ModalFooter = ModalFooter;
exports.ModalLoadingWrapper = ModalLoadingWrapper;
exports.ModalTitle = ModalTitle;
exports.Overlay = Overlay;
exports.StyledModalContent = StyledModalContent;
exports.StyledModalHeader = StyledModalHeader;
