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 classnames from "classnames";
import * as PropTypes from "prop-types";
import * as React from "react";
import { Button } from "../Button/Button";
import { FlexBox, ItemAlign } from "../flex";
import LifeFloat from "./LifeFloat";
import "./WizardLayout.less";
var SECTION_PROP_TYPE = PropTypes.shape({
    title: PropTypes.string,
    subtitle: PropTypes.string,
    content: PropTypes.node.isRequired,
});
var propTypes = {
    className: PropTypes.string,
    fullscreen: PropTypes.bool,
    headerImg: PropTypes.element,
    helpContent: PropTypes.node,
    hidePreviousStepButton: PropTypes.bool,
    nextStepButtonDisabled: PropTypes.bool,
    nextStepButtonText: PropTypes.node,
    prevStepButtonDisabled: PropTypes.bool,
    prevStepButtonText: PropTypes.node,
    onNextStep: PropTypes.func.isRequired,
    onPrevStep: PropTypes.func.isRequired,
    sections: PropTypes.arrayOf(SECTION_PROP_TYPE).isRequired,
    stepper: PropTypes.node.isRequired,
    subtitle: PropTypes.string,
    title: PropTypes.string.isRequired,
};
var cssClass = {
    BODY: "WizardLayout--body",
    CONTAINER: "WizardLayout",
    SECTION_CONTAINER: "WizardLayout--sectionContainer",
    SECTION: "WizardLayout--section",
    SECTION_TITLE: "WizardLayout--sectionTitle",
    SECTION_SUBTITLE: "WizardLayout--sectionSubtitle",
    FOOTER: "WizardLayout--footer",
    HEADER: "WizardLayout--header",
    HEADER_IMG: "WizardLayout--headerImg",
    HEADER_TITLE: "WizardLayout--headerTitle",
    HEADER_SUBTITLE: "WizardLayout--headerSubtitle",
    HELP_CONTAINER: "WizardLayout--helpContainer",
    HELP_IMG: "WizardLayout--helpImg",
    LOGO: "WizardLayout--logo",
    PREVIOUS_BUTTON: "WizardLayout--previousButton",
    STEPPER_CONTAINER: "WizardLayout--stepperContainer",
    SECTION_DIVIDER: "WizardLayout--sectionDivider",
    NEXT_BUTTON: "WizardLayout--nextButton",
    CONTAINER_FULLSCREEN: "WizardLayout--fullscreen",
    BODY_FULLSCREEN: "WizardLayout--body--fullscreen",
    FOOTER_FULLSCREEN: "WizardLayout--footer--fullscreen",
};
/**
 * Layout to provide guidelines on how to implement a Wizard.
 */
var WizardLayout = /** @class */ (function (_super) {
    __extends(WizardLayout, _super);
    function WizardLayout() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._onPrevStep = function () {
            _this.props.onPrevStep();
        };
        _this._onNextStep = function () {
            _this.props.onNextStep();
        };
        return _this;
    }
    WizardLayout.prototype.render = function () {
        var _a = this.props, className = _a.className, sections = _a.sections, headerImg = _a.headerImg, helpContent = _a.helpContent, nextStepButtonDisabled = _a.nextStepButtonDisabled, nextStepButtonText = _a.nextStepButtonText, hidePreviousStepButton = _a.hidePreviousStepButton, prevStepButtonDisabled = _a.prevStepButtonDisabled, prevStepButtonText = _a.prevStepButtonText, stepper = _a.stepper, subtitle = _a.subtitle, title = _a.title, fullscreen = _a.fullscreen;
        return (React.createElement(FlexBox, { column: true, grow: true, className: classnames(cssClass.CONTAINER, className, fullscreen && cssClass.CONTAINER_FULLSCREEN) },
            React.createElement(FlexBox, { className: cssClass.HEADER },
                headerImg && React.createElement("div", { className: cssClass.HEADER_IMG }, headerImg),
                React.createElement("div", null,
                    React.createElement("p", { className: cssClass.HEADER_TITLE }, title),
                    subtitle && React.createElement("p", { className: cssClass.HEADER_SUBTITLE }, subtitle))),
            React.createElement(FlexBox, { className: classnames(cssClass.BODY, fullscreen && cssClass.BODY_FULLSCREEN) },
                React.createElement(FlexBox, { column: true, className: cssClass.STEPPER_CONTAINER },
                    stepper,
                    React.createElement(FlexBox, { grow: true }),
                    helpContent && (React.createElement(FlexBox, { alignItems: ItemAlign.CENTER, className: cssClass.HELP_CONTAINER },
                        React.createElement(LifeFloat, { className: cssClass.HELP_IMG }),
                        helpContent))),
                React.createElement(FlexBox, { column: true, grow: true, className: cssClass.SECTION_CONTAINER }, sections.map(function (elem, i) { return (React.createElement("div", { className: cssClass.SECTION, key: i },
                    elem.title && React.createElement("p", { className: cssClass.SECTION_TITLE }, elem.title),
                    elem.subtitle && React.createElement("p", { className: cssClass.SECTION_SUBTITLE }, elem.subtitle),
                    (elem.subtitle || elem.title) && React.createElement("div", { className: cssClass.SECTION_DIVIDER }),
                    elem.content)); }))),
            React.createElement(FlexBox, { className: classnames(cssClass.FOOTER, fullscreen && cssClass.FOOTER_FULLSCREEN) },
                React.createElement("img", { src: require("./logo.svg"), alt: "", className: cssClass.LOGO }),
                React.createElement(FlexBox, { grow: true }),
                !hidePreviousStepButton && (React.createElement(Button, { type: "link", value: prevStepButtonText || "Previous step", className: cssClass.PREVIOUS_BUTTON, onClick: this._onPrevStep, disabled: prevStepButtonDisabled })),
                React.createElement(Button, { type: "primary", value: nextStepButtonText || "Next step", className: cssClass.NEXT_BUTTON, onClick: this._onNextStep, disabled: nextStepButtonDisabled }))));
    };
    WizardLayout.propTypes = propTypes;
    return WizardLayout;
}(React.PureComponent));
export default WizardLayout;
