"use strict";

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _ = require("../..");

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

var Modal = function Modal(_ref) {
  var _ref$appElementId = _ref.appElementId,
      appElementId = _ref$appElementId === void 0 ? 'root' : _ref$appElementId,
      isOpen = _ref.isOpen,
      toggleOpen = _ref.toggleOpen,
      header = _ref.header,
      _ref$showHeaderBorder = _ref.showHeaderBorder,
      showHeaderBorder = _ref$showHeaderBorder === void 0 ? false : _ref$showHeaderBorder,
      content = _ref.content;
  return /*#__PURE__*/_react.default.createElement(_reactModal.default, {
    isOpen: isOpen,
    onRequestClose: toggleOpen,
    shouldCloseOnEsc: true,
    shouldCloseOnOverlayClick: true,
    appElement: document.getElementById(appElementId) || undefined,
    style: {
      content: {
        bottom: 'auto',
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        maxHeight: '100%',
        overflowY: 'scroll'
      }
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('grid-row display-flex flex-justify flex-align-center', {
      'border-bottom border-base-lighter': showHeaderBorder
    })
  }, header, /*#__PURE__*/_react.default.createElement("div", {
    className: "oec-modal-close"
  }, /*#__PURE__*/_react.default.createElement(_.Button, {
    appearance: "unstyled",
    text: /*#__PURE__*/_react.default.createElement("div", {
      className: "display-flex flex-column flex-align-center"
    }, /*#__PURE__*/_react.default.createElement(_.X, {
      className: "height-3 text-base-darker"
    }), /*#__PURE__*/_react.default.createElement("p", {
      className: "margin-y-05"
    }, "close")),
    onClick: toggleOpen
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)({
      'margin-top-2': showHeaderBorder
    })
  }, content));
};

exports.Modal = Modal;