"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CoalitionModal = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _focusTrapReact = _interopRequireDefault(require("focus-trap-react"));
var _svgs = require("../../svgs");
require("./CoalitionModal.css");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const CoalitionModal = _ref => {
  let {
    onClickOutside,
    onKeyDown,
    modalRef,
    closeModal,
    title,
    children,
    footer
  } = _ref;
  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_focusTrapReact.default, null, /*#__PURE__*/_react.default.createElement("aside", {
    tag: "aside",
    role: "dialog",
    tabIndex: "-1",
    "aria-modal": "true",
    className: "modal-cover",
    onClick: onClickOutside,
    onKeyDown: onKeyDown
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "modal-area",
    ref: modalRef
  }, ModalHeader(title, closeModal), /*#__PURE__*/_react.default.createElement("div", {
    className: "modal-body"
  }, children), ModalFooter(footer)))), document.body);
};
exports.CoalitionModal = CoalitionModal;
const ModalHeader = (title, closeModal) => /*#__PURE__*/_react.default.createElement("div", {
  className: "modal-header"
}, /*#__PURE__*/_react.default.createElement("h4", {
  className: "modal-header-title coalition-component-desktop"
}, title), /*#__PURE__*/_react.default.createElement("h5", {
  className: "modal-header-title coalition-component-mobile"
}, title), /*#__PURE__*/_react.default.createElement("button", {
  className: "modal-header-close",
  onClick: closeModal
}, /*#__PURE__*/_react.default.createElement("div", {
  className: "modal-header-close-icon coalition-component-desktop"
}, /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, null)), /*#__PURE__*/_react.default.createElement("div", {
  className: "modal-header-close-icon coalition-component-mobile"
}, /*#__PURE__*/_react.default.createElement(_svgs.BackArrow, null))));
const ModalFooter = expiracy => {
  const label = expiracy ? "V\xE1lido hasta el ".concat(expiracy) : "Permanente";
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "modal-footer"
  }, label, " ");
};