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 __());
    };
})();
import * as React from "react";
import * as PropTypes from "prop-types";
import { Button } from "../Button/Button";
import { Modal } from "../Modal/Modal";
import "./MultiplePanelModals.less";
var propTypes = {
    className: PropTypes.string,
    componentArray: PropTypes.array.isRequired,
    closeModal: PropTypes.func.isRequired,
    defaultOnClickLeftButton: PropTypes.func,
    defaultOnClickRightButton: PropTypes.func,
    height: PropTypes.string,
    rightButtonDisabled: PropTypes.bool,
    startingPanel: PropTypes.number,
    showStepNumber: PropTypes.bool,
};
var defaultProps = {
    startingPanel: 0,
    rightButtonDisabled: false,
    defaultOnClickLeftButton: function () { },
    defaultOnClickRightButton: function () { },
    showStepNumber: false,
};
export var Classes = {
    STEP_NUMBER: "MultiplePanelModals--stepNumber",
};
var MultiplePanelModals = /** @class */ (function (_super) {
    __extends(MultiplePanelModals, _super);
    function MultiplePanelModals(props) {
        var _this = _super.call(this, props) || this;
        _this.state = { currentPanel: _this.props.startingPanel };
        return _this;
    }
    MultiplePanelModals.prototype.render = function () {
        var _this = this;
        var _a = this.props, closeModal = _a.closeModal, componentArray = _a.componentArray, className = _a.className, defaultOnClickLeftButton = _a.defaultOnClickLeftButton, defaultOnClickRightButton = _a.defaultOnClickRightButton, height = _a.height, rightButtonDisabled = _a.rightButtonDisabled, showStepNumber = _a.showStepNumber;
        var currentPanel = this.state.currentPanel;
        var isFirstPanel = currentPanel === 0;
        var isLastPanel = currentPanel + 1 === componentArray.length;
        if (this.state.currentPanel >= componentArray.length) {
            return React.createElement("div", null);
        }
        var _b = componentArray[this.state.currentPanel], panelClassName = _b.panelClassName, focusLocked = _b.focusLocked, title = _b.title, width = _b.width, panel = _b.panel, leftButtonName = _b.leftButtonName, leftButtonType = _b.leftButtonType, overrideOnClickLeftButton = _b.overrideOnClickLeftButton, rightButtonName = _b.rightButtonName, rightButtonType = _b.rightButtonType, overrideOnClickRightButton = _b.overrideOnClickRightButton;
        var leftButtonValue;
        if (leftButtonName) {
            leftButtonValue = leftButtonName;
        }
        else if (isFirstPanel) {
            leftButtonValue = "Remind me later";
        }
        else {
            leftButtonValue = "Back";
        }
        var rightButtonValue;
        if (rightButtonName) {
            rightButtonValue = rightButtonName;
        }
        else if (isLastPanel) {
            rightButtonValue = "Done";
        }
        else {
            rightButtonValue = "Next";
        }
        var leftButtonOnClick = defaultOnClickLeftButton;
        if (overrideOnClickLeftButton) {
            leftButtonOnClick = overrideOnClickLeftButton;
        }
        var rightButtonOnClick = defaultOnClickRightButton;
        if (overrideOnClickRightButton) {
            rightButtonOnClick = overrideOnClickRightButton;
        }
        var totalPanels = componentArray.length;
        return (React.createElement("div", { className: className },
            React.createElement(Modal, { className: panelClassName, focusLocked: focusLocked, title: title, closeModal: closeModal, width: width },
                React.createElement("div", { style: { height: height } }, panel),
                React.createElement("footer", null,
                    showStepNumber && (React.createElement("span", { className: Classes.STEP_NUMBER }, "Step " + (currentPanel + 1) + " of " + totalPanels)),
                    React.createElement(Button, { value: leftButtonValue, type: leftButtonType || "link", onClick: function () {
                            if (!isFirstPanel) {
                                _this.setState({ currentPanel: _this.state.currentPanel - 1 });
                            }
                            leftButtonOnClick();
                        } }),
                    React.createElement(Button, { value: rightButtonValue, type: rightButtonType || "primary", onClick: function () {
                            rightButtonOnClick();
                            if (isLastPanel) {
                                if (overrideOnClickRightButton) {
                                    return;
                                }
                                closeModal();
                            }
                            _this.setState({ currentPanel: _this.state.currentPanel + 1 });
                        }, disabled: rightButtonDisabled })))));
    };
    MultiplePanelModals.propTypes = propTypes;
    MultiplePanelModals.defaultProps = defaultProps;
    return MultiplePanelModals;
}(React.Component));
export { MultiplePanelModals };
