import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import _pt from 'prop-types';
import { warn } from '../../utils/maintenance/warn.esm.js';
import { animated as extendedAnimated, useSpring } from '../../../node_modules/react-spring/web.esm.js';
import { ModalContent } from './ModalContent.esm.js';

var baseCss = function baseCss(theme) {
  return {
    background: theme.colors.white,
    height: "100vh",
    bottom: 0,
    top: 0,
    position: "fixed",
    overflowY: "auto"
  };
};

var DEFAULT_MAX_WIDTH = "432px";
var sizesStyles = {
  DEFAULT: function DEFAULT(_theme) {
    return _defineProperty({
      width: "100vw"
    }, "@media (min-width: ".concat(DEFAULT_MAX_WIDTH, ")"), {
      maxWidth: DEFAULT_MAX_WIDTH
    });
  }
};
var AnimatedModalContent = extendedAnimated(ModalContent);
var springConfig = {
  right: {
    from: {
      transform: "translate3d(100%,0,0)"
    }
  },
  left: {
    from: {
      transform: "translate3d(-100%,0,0)"
    }
  }
};
var ModalPanel = function ModalPanel(_ref2) {
  var maxWidth = _ref2.maxWidth,
      _ref2$position = _ref2.position,
      position = _ref2$position === void 0 ? "right" : _ref2$position,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? "DEFAULT" : _ref2$size,
      props = _objectWithoutProperties(_ref2, ["maxWidth", "position", "size"]);

  var styleProps = useSpring(_objectSpread2({
    to: {
      transform: "translate3d(0,0,0)"
    },
    config: {
      tension: 400,
      mass: 1,
      friction: 40
    }
  }, springConfig[position]));

  if (maxWidth) {
    warn("\"maxWidth\" prop has been deprecated in favour of \"size\" (set to \"DEFAULT\" if not passed)");
  }

  return jsx(AnimatedModalContent, _extends({
    style: styleProps,
    css: function css(theme) {
      return [baseCss(theme), maxWidth ? {
        maxWidth: maxWidth
      } : sizesStyles[size](theme), position === "right" ? {
        right: 0
      } : {
        left: 0
      }];
    }
  }, props));
};
ModalPanel.propTypes = {
  position: _pt.oneOf(["left", "right"]),
  size: _pt.oneOf(["DEFAULT"]),
  maxWidth: _pt.string
};
ModalPanel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ModalPanel",
  "props": {
    "position": {
      "defaultValue": {
        "value": "`right`",
        "computed": false
      },
      "required": false
    },
    "size": {
      "defaultValue": {
        "value": "`DEFAULT`",
        "computed": false
      },
      "required": false
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Modal/ModalPanel.tsx"] = {
    name: "ModalPanel",
    docgenInfo: ModalPanel.__docgenInfo,
    path: "src/components/Modal/ModalPanel.tsx"
  };
}

export { ModalPanel };
//# sourceMappingURL=ModalPanel.esm.js.map
