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 React from "react";
import * as PropTypes from "prop-types";
import "./Step.less";
import CheckMark from "./CheckMark";
import { FlexBox } from "../flex";
import Exclamation from "./Exclamation";
var propTypes = {
    className: PropTypes.string,
    title: PropTypes.string,
    description: PropTypes.node,
    id: PropTypes.string.isRequired,
    label: PropTypes.node,
    warning: PropTypes.string,
    state: PropTypes.oneOf(["INCOMPLETE", "SUCCESS", "WARNING", "NEXT"]),
    current: PropTypes.bool,
    optional: PropTypes.bool,
    onClick: PropTypes.func,
};
var cssClass = {
    CURRENT: "Step--current",
    CONTAINER: "Step",
    DESCRIPTION: "Step--description",
    ICON: "Step--icon",
    MESSAGE_OPTIONAL: "Step--message--optional",
    MESSAGE_WARNING: "Step--message--warning",
    NEXT: "Step--next",
    SEEKABLE: "Step--seekable",
    SUCCESS: "Step--success",
    TITLE: "Step--title",
    WARNING: "Step--warning",
};
var defaultProps = {
    state: "INCOMPLETE",
};
/**
 * Single icon and caption denoting a step.
 * Usually used in a Stepper for providing a list of steps to the user.
 */
var Step = /** @class */ (function (_super) {
    __extends(Step, _super);
    function Step() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._onClick = function () { return _this.props.onClick(_this.props.id); };
        _this._iconContent = function () {
            var _a = _this.props, label = _a.label, current = _a.current, state = _a.state;
            var iconMap = {
                SUCCESS: React.createElement(CheckMark, null),
                WARNING: React.createElement(Exclamation, null),
                INCOMPLETE: label,
                NEXT: label,
            };
            if (current) {
                return label;
            }
            return iconMap[state];
        };
        return _this;
    }
    Step.prototype.render = function () {
        var _a = this.props, className = _a.className, title = _a.title, description = _a.description, state = _a.state, current = _a.current, warning = _a.warning, optional = _a.optional, onClick = _a.onClick;
        var stepClassName = classnames(className, cssClass.CONTAINER, state === "SUCCESS" && cssClass.SUCCESS, current && cssClass.CURRENT, state === "WARNING" && cssClass.WARNING, state === "NEXT" && cssClass.NEXT, onClick && cssClass.SEEKABLE);
        var icon = React.createElement(FlexBox, { className: cssClass.ICON }, this._iconContent());
        var content = (React.createElement("div", null,
            title && React.createElement("div", { className: cssClass.TITLE }, title),
            warning && React.createElement("div", { className: cssClass.MESSAGE_WARNING }, warning),
            optional && React.createElement("div", { className: cssClass.MESSAGE_OPTIONAL }, "Optional"),
            description && React.createElement("div", { className: cssClass.DESCRIPTION }, description)));
        if (onClick) {
            return (React.createElement("button", { className: classnames(stepClassName), onClick: this._onClick },
                icon,
                content));
        }
        return (React.createElement("div", { className: stepClassName },
            icon,
            content));
    };
    Step.propTypes = propTypes;
    Step.defaultProps = defaultProps;
    return Step;
}(React.PureComponent));
export default Step;
