"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _reactModal = _interopRequireDefault(require("react-modal"));

var _styledTheme = require("styled-theme");

var _components = require("components");

var _jsxFileName = "_forks/arc/src/molecules/Modal/index.js";

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

_styledComponents.injectGlobal`
  body.ReactModal__Body--open {
    overflow: hidden;
  }
`;
const overlayStyles = _styledComponents.css`
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  transition: opacity 250ms ease-in-out;
  opacity: 0;
  &[class*="after-open"] {
    opacity: 1;
  }
  &[class*="before-close"] {
    opacity: 0;
  }
`;
const ModalBox = (0, _styledComponents.default)(_reactModal.default)`
  position: absolute;
  display: flex;
  flex-direction: column;
  font-family: ${(0, _styledTheme.font)('primary')};
  font-size: 1rem;
  background-color: ${(0, _styledTheme.palette)('grayscale', 0, true)};
  border-radius: 0.125em;
  color: ${(0, _styledTheme.palette)('grayscale', 0)};
  top: calc(50% - 1rem);
  left: calc(50% - 1rem);
  right: auto;
  bottom: auto;
  margin: 1rem calc(-50% + 1rem) 1rem 1rem;
  transform: translate(-50%, 100%);
  transition: transform 250ms ease-in-out;
  outline: none;
  box-sizing: border-box;
  min-width: 320px;
  max-width: calc(640px - 1rem);
  max-height: calc(100% - 1rem);
  padding-top: ${({
  hasHeader
}) => hasHeader ? 0 : '1rem'};
  @media screen and (max-width: 640px) {
    width: calc(100% - 1rem);
    min-width: 0;
  }
  &[class*="after-open"] {
    transform: translate(-50%, -50%);
  }
  &[class*="before-close"] {
    transform: translate(-50%, 100%);
  }
`;
const Header = _styledComponents.default.header`
  display: flex;
  align-items: center;
  padding: 1rem;
  > *:first-child {
    flex: 1;
  }
`;
const StyledHeading = (0, _styledComponents.default)(_components.Heading)`
  margin: 0 1rem 0 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
`;
const Content = _styledComponents.default.div`
  overflow: auto;
  padding: 0 1rem;
  margin-bottom: 1rem;
`;
const StyledReactModal = (0, _styledComponents.default)((_ref) => {
  let className = _ref.className,
      props = _objectWithoutProperties(_ref, ["className"]);

  return _react.default.createElement(ModalBox, _extends({
    overlayClassName: className,
    closeTimeoutMS: 250
  }, props, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90
    },
    __self: void 0
  }));
})`${overlayStyles}`;

const Modal = (_ref2) => {
  let children = _ref2.children,
      title = _ref2.title,
      closeable = _ref2.closeable,
      onClose = _ref2.onClose,
      props = _objectWithoutProperties(_ref2, ["children", "title", "closeable", "onClose"]);

  const hasHeader = title || closeable;
  return _react.default.createElement(StyledReactModal, _extends({
    contentLabel: title || 'Modal',
    onRequestClose: onClose,
    hasHeader: hasHeader
  }, props, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98
    },
    __self: void 0
  }), hasHeader && _react.default.createElement(Header, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 105
    },
    __self: void 0
  }, _react.default.createElement(StyledHeading, {
    level: 2,
    reverse: props.reverse,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 106
    },
    __self: void 0
  }, title), closeable && _react.default.createElement(_components.IconButton, {
    icon: "close",
    onClick: onClose,
    palette: "white",
    reverse: true,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 107
    },
    __self: void 0
  })), _react.default.createElement(Content, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 110
    },
    __self: void 0
  }, children));
};

Modal.propTypes = {
  children: _propTypes.default.node,
  title: _propTypes.default.string,
  closeable: _propTypes.default.bool,
  reverse: _propTypes.default.bool,
  onClose: _propTypes.default.func.isRequired
};
var _default = Modal;
exports.default = _default;