import { __assign, __rest } from "tslib";
import React, { useMemo } from "react";
import { IconYggdrassilClose, IconYggdrassilTick, IconYggdrassilInfo, IconBrokenClock } from "@greenatom/icons";
import { P1 } from "../../../typography";
import Divider from "../../../Divider";
import { StepItemVertical, Description, NumberStep, Title, StepItemHorizontal } from "./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 = __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 = useMemo(function () {
        if (isCurrent || isDisabled) {
            return null;
        }
        switch (status) {
            case "error":
                return React.createElement(IconYggdrassilClose, null);
            case "warning":
                return React.createElement(IconYggdrassilInfo, null);
            case "completed":
                return React.createElement(IconYggdrassilTick, null);
            case "waiting":
                return React.createElement(IconBrokenClock, null);
            default:
                return null;
        }
    }, [size, status, isDisabled, isCurrent]);
    return direction === "horizontal" ? (React.createElement(StepItemHorizontal, __assign({ status: status, isDisabled: isDisabled, className: className, isCurrent: isCurrent }, otherProps),
        React.createElement("div", { className: "step-item-row" },
            React.createElement(NumberStep, { onClick: handelClick, className: "step-item-number" }, StatusIcon || React.createElement(P1, { type: "cygnus" }, stepNumber)),
            size !== "s" && (React.createElement(Title, { onClick: handelClick, className: "step-item-title", type: "phoenix" }, title)),
            !isLast && React.createElement(Divider, { className: "step-item-divider" })),
        size === "l" && description && (React.createElement(Description, { className: "step-item-description", type: "cetus" }, description)))) : (React.createElement(StepItemVertical, __assign({ status: status, className: className, isDisabled: isDisabled, isCurrent: isCurrent }, otherProps),
        React.createElement("div", null,
            React.createElement(NumberStep, { onClick: handelClick, className: "step-item-number" }, StatusIcon || React.createElement(P1, { type: "cygnus" }, stepNumber)),
            !isLast && (React.createElement(Divider, { direction: "column", className: "step-item-divider" }))),
        React.createElement("div", { onClick: handelClick, className: "step-item-text" },
            size !== "s" && (React.createElement(Title, { className: "step-item-title", type: "phoenix" }, title)),
            size === "l" && description && (React.createElement(Description, { className: "step-item-description", type: "cetus" }, description)))));
};
export default StepItem;
