"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Modal = void 0;
var React = require("react");
var PropTypes = require("prop-types");
var classnames = require("classnames");
var FocusTrap = require("focus-trap-react");
var reactDom = require("react-dom");
require("./Modal.less");
var DEFAULT_WIDTH = 400;
var ESC = 27;
var closeIcon = (React.createElement("svg", { viewBox: "0 0 1792 1792", xmlns: "http://www.w3.org/2000/svg" },
    React.createElement("path", { d: "M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z" })));
var propTypes = {
    className: PropTypes.string,
    width: PropTypes.number,
    title: PropTypes.node.isRequired,
    closeModal: PropTypes.func.isRequired,
    children: PropTypes.node.isRequired,
    focusLocked: PropTypes.bool,
    createPortal: PropTypes.bool,
};
var defaultProps = {
    width: DEFAULT_WIDTH,
    focusLocked: true,
    createPortal: true,
};
var Modal = /** @class */ (function (_super) {
    __extends(Modal, _super);
    function Modal(props) {
        var _this = _super.call(this, props) || this;
        _this.state = { windowHeight: window.innerHeight };
        _this.handleKeyUp = _this.handleKeyUp.bind(_this);
        _this.handleResize = _this.handleResize.bind(_this);
        return _this;
    }
    Modal.prototype.componentDidMount = function () {
        window.addEventListener("keyup", this.handleKeyUp);
        window.addEventListener("resize", this.handleResize);
        this.handleResize();
    };
    Modal.prototype.componentWillUnmount = function () {
        window.removeEventListener("keyup", this.handleKeyUp);
        window.removeEventListener("resize", this.handleResize);
    };
    Modal.prototype.handleKeyUp = function (e) {
        if (e.keyCode === ESC) {
            this.props.closeModal();
        }
    };
    Modal.prototype.handleResize = function () {
        this.setState({ windowHeight: window.innerHeight });
    };
    Modal.prototype.render = function () {
        // Width should be responsive with window size
        var width = Math.min(window.innerWidth, this.props.width);
        var windowStyle = {
            width: width + "px",
            /* stylelint-disable-next-line unit-whitelist */
            marginLeft: "-" + width / 2 + "px",
        };
        // The content is max 90% of the window height less 60px (height of the header)
        var contentStyle = { maxHeight: this.state.windowHeight * 0.9 - 60 };
        var modalContent = (React.createElement("div", { className: classnames("Modal", this.props.className) },
            React.createElement("div", { className: "Modal--background", onClick: this.props.closeModal, "aria-hidden": "true" }),
            React.createElement("div", { className: "Modal--window", style: windowStyle, role: "dialog", "aria-modal": "true" },
                React.createElement("header", { className: "Modal--header" },
                    React.createElement("button", { className: "Modal--close", onClick: this.props.closeModal, type: "button", "aria-label": "close modal window" }, closeIcon),
                    React.createElement("h1", null, this.props.title)),
                React.createElement("div", { style: contentStyle, className: "Modal--window--content" },
                    this.props.children,
                    React.createElement("div", { className: "Modal--padding--div" })))));
        var modal;
        if (this.props.focusLocked) {
            modal = React.createElement(FocusTrap, null, modalContent);
        }
        else {
            modal = modalContent;
        }
        if (reactDom.createPortal && this.props.createPortal) {
            return reactDom.createPortal(modal, document.body);
        }
        return modal;
    };
    Modal.propTypes = propTypes;
    Modal.defaultProps = defaultProps;
    return Modal;
}(React.Component));
exports.Modal = Modal;
