import { __assign, __rest } from "tslib";
import React, { useContext } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { StepsContext } from './steps-context';
import { Check, Close } from '../_utils/components';
var StepsItem = React.forwardRef(function (props, ref) {
    var _a, _b;
    var _c = props.stepIndex, stepIndex = _c === void 0 ? 0 : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, status = props.status, title = props.title, description = props.description, icon = props.icon, onClick = props.onClick, className = props.className, customisedCls = props.prefixCls, otherProps = __rest(props, ["stepIndex", "disabled", "status", "title", "description", "icon", "onClick", "className", "prefixCls"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('steps-item', configContext.prefixCls, customisedCls);
    var stepsContext = useContext(StepsContext);
    var getStatus = function () {
        var current = stepsContext.current;
        if (status === 'error') {
            return 'error';
        }
        else if (current > stepIndex) {
            return 'finish';
        }
        else if (current === stepIndex) {
            return stepsContext.status;
        }
        else {
            return 'wait';
        }
    };
    var stepStatus = 'status' in props ? props.status : getStatus();
    var cls = classNames(prefixCls, className, prefixCls + "_" + stepStatus, prefixCls + "_label-" + stepsContext.labelPlacement, (_a = {},
        _a[prefixCls + "_disabled"] = disabled,
        _a));
    var stepItemOnClick = function (e) {
        if (!disabled && stepsContext.clickable) {
            onClick && onClick(e);
            stepsContext.onClick && stepsContext.onClick(stepIndex);
        }
    };
    var renderIcon = function () {
        if (icon) {
            return icon;
        }
        var iconNode = stepIndex + 1;
        if (stepStatus === 'finish') {
            iconNode = React.createElement(Check, null);
        }
        else if (stepStatus === 'error') {
            iconNode = React.createElement(Close, null);
        }
        return iconNode;
    };
    return (React.createElement("div", __assign({}, otherProps, { role: stepsContext.clickable ? 'button' : undefined, ref: ref, className: cls, onClick: stepItemOnClick }),
        React.createElement("div", { className: prefixCls + "__head" },
            React.createElement("div", { className: classNames(prefixCls + "__icon", (_b = {}, _b[prefixCls + "__icon_has-icon"] = icon, _b)) }, renderIcon()),
            React.createElement("div", { className: prefixCls + "__tail" })),
        React.createElement("div", { className: prefixCls + "__content" },
            React.createElement("div", { className: prefixCls + "__title" }, title),
            React.createElement("div", { className: prefixCls + "__desc" }, description))));
});
StepsItem.displayName = 'StepsItem';
export default StepsItem;
//# sourceMappingURL=steps-item.js.map