(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "@greenatom/icons", "../../../typography", "../../../Divider", "./styles"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var icons_1 = require("@greenatom/icons");
    var typography_1 = require("../../../typography");
    var Divider_1 = (0, tslib_1.__importDefault)(require("../../../Divider"));
    var styles_1 = require("./styles");
    var StepItem = function (_a) {
        var status = _a.status, isCurrent = _a.isCurrent, isDisabled = _a.isDisabled, size = _a.size, description = _a.description, stepOnClick = _a.stepOnClick, onChangeCurrent = _a.onChangeCurrent, title = _a.title, className = _a.className, direction = _a.direction, stepNumber = _a.stepNumber, isLast = _a.isLast, otherProps = (0, tslib_1.__rest)(_a, ["status", "isCurrent", "isDisabled", "size", "description", "stepOnClick", "onChangeCurrent", "title", "className", "direction", "stepNumber", "isLast"]);
        var handelClick = function (event) {
            if (isDisabled) {
                return;
            }
            onChangeCurrent === null || onChangeCurrent === void 0 ? void 0 : onChangeCurrent();
            stepOnClick === null || stepOnClick === void 0 ? void 0 : stepOnClick(event);
        };
        var StatusIcon = (0, react_1.useMemo)(function () {
            if (isCurrent || isDisabled) {
                return null;
            }
            switch (status) {
                case "error":
                    return react_1.default.createElement(icons_1.IconYggdrassilClose, null);
                case "warning":
                    return react_1.default.createElement(icons_1.IconYggdrassilInfo, null);
                case "completed":
                    return react_1.default.createElement(icons_1.IconYggdrassilTick, null);
                case "waiting":
                    return react_1.default.createElement(icons_1.IconBrokenClock, null);
                default:
                    return null;
            }
        }, [size, status, isDisabled, isCurrent]);
        return direction === "horizontal" ? (react_1.default.createElement(styles_1.StepItemHorizontal, (0, tslib_1.__assign)({ status: status, isDisabled: isDisabled, className: className, isCurrent: isCurrent }, otherProps),
            react_1.default.createElement("div", { className: "step-item-row" },
                react_1.default.createElement(styles_1.NumberStep, { onClick: handelClick, className: "step-item-number" }, StatusIcon || react_1.default.createElement(typography_1.P1, { type: "cygnus" }, stepNumber)),
                size !== "s" && (react_1.default.createElement(styles_1.Title, { onClick: handelClick, className: "step-item-title", type: "phoenix" }, title)),
                !isLast && react_1.default.createElement(Divider_1.default, { className: "step-item-divider" })),
            size === "l" && description && (react_1.default.createElement(styles_1.Description, { className: "step-item-description", type: "cetus" }, description)))) : (react_1.default.createElement(styles_1.StepItemVertical, (0, tslib_1.__assign)({ status: status, className: className, isDisabled: isDisabled, isCurrent: isCurrent }, otherProps),
            react_1.default.createElement("div", null,
                react_1.default.createElement(styles_1.NumberStep, { onClick: handelClick, className: "step-item-number" }, StatusIcon || react_1.default.createElement(typography_1.P1, { type: "cygnus" }, stepNumber)),
                !isLast && (react_1.default.createElement(Divider_1.default, { direction: "column", className: "step-item-divider" }))),
            react_1.default.createElement("div", { onClick: handelClick, className: "step-item-text" },
                size !== "s" && (react_1.default.createElement(styles_1.Title, { className: "step-item-title", type: "phoenix" }, title)),
                size === "l" && description && (react_1.default.createElement(styles_1.Description, { className: "step-item-description", type: "cetus" }, description)))));
    };
    exports.default = StepItem;
});
