/**
 * amis-ui v6.12.0-beta.0
 * Copyright 2018-2025 fex
 */

import React__default from 'react';
import { themeable } from 'amis-core';
import { Icon } from './icons.js';

var StepStatus;
(function (StepStatus) {
    StepStatus["wait"] = "wait";
    StepStatus["process"] = "process";
    StepStatus["finish"] = "finish";
    StepStatus["error"] = "error";
})(StepStatus || (StepStatus = {}));
function Steps(props) {
    var stepsRow = props.steps, cx = props.classnames, className = props.className, style = props.style, current = props.current, status = props.status, _a = props.mode, mode = _a === void 0 ? 'horizontal' : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? 'horizontal' : _b, _c = props.progressDot, progressDot = _c === void 0 ? false : _c, iconPosition = props.iconPosition, mobileUI = props.mobileUI, onClickStep = props.onClickStep;
    var FINISH_ICON = 'check';
    var ERROR_ICON = 'close';
    function getStepStatus(step, i) {
        var stepStatus = StepStatus.wait;
        var icon = step.icon;
        if (i < current) {
            stepStatus = StepStatus.finish;
            !icon && (icon = FINISH_ICON);
        }
        else if (i === current) {
            stepStatus = StepStatus.process;
        }
        if (typeof status === 'string') {
            if (i === current) {
                stepStatus = step.status || status || StepStatus.process;
                stepStatus === StepStatus.error && !icon && (icon = ERROR_ICON);
            }
        }
        else if (typeof status === 'object') {
            var key = step.value;
            key && status[key] && (stepStatus = status[key]);
        }
        return {
            stepStatus: stepStatus,
            icon: icon
        };
    }
    return (React__default.createElement("ul", { className: cx(
        // 纵向步骤条暂时不支持labelPlacement属性
        'Steps', "Steps--Placement-".concat(progressDot || (labelPlacement === 'vertical' && mode != 'vertical')
            ? 'vertical'
            : ''), "Steps--".concat(progressDot ? 'ProgressDot' : ''), "Steps--".concat(mode), mobileUI ? 'Steps-mobile' : '', className), style: style }, stepsRow.map(function (step, i) {
        var _a = getStepStatus(step, i), stepStatus = _a.stepStatus, icon = _a.icon;
        return (React__default.createElement("li", { key: i, className: cx('StepsItem', "is-".concat(stepStatus), step.className, "".concat(progressDot ? 'StepsItem-ProgressDot' : ''), "".concat(onClickStep && stepStatus === StepStatus.finish
                ? 'is-clickable'
                : '')) },
            React__default.createElement("div", { className: cx('StepsItem-container', iconPosition && mode != 'vertical' && 'StepsItem-vertical') },
                React__default.createElement("div", { className: cx('StepsItem-containerTail') }),
                progressDot ? (React__default.createElement("div", { className: cx('StepsItem-containerProgressDot'), onClick: function () { return onClickStep && onClickStep(i, step); } })) : (React__default.createElement("div", { className: cx('StepsItem-containerIcon', i < current && 'is-success'), onClick: function () { return onClickStep && onClickStep(i, step); } },
                    React__default.createElement("span", { className: cx('StepsItem-icon', step.iconClassName) }, icon ? React__default.createElement(Icon, { icon: icon, className: "icon" }) : i + 1))),
                React__default.createElement("div", { className: cx('StepsItem-containerWrapper'), onClick: function () { return onClickStep && onClickStep(i, step); } },
                    React__default.createElement("div", { className: cx('StepsItem-body') },
                        React__default.createElement("div", { className: cx('StepsItem-title', "StepsItem-".concat(progressDot ? 'vertical-ProgressDot' : ''), i < current && 'is-success') },
                            React__default.createElement("span", { className: cx('StepsItem-ellText'), title: typeof step.title === 'string' ? step.title : undefined }, step.title),
                            step.subTitle && (React__default.createElement("span", { className: cx('StepsItem-subTitle', 'StepsItem-ellText'), title: typeof step.subTitle === 'string'
                                    ? step.subTitle
                                    : undefined }, step.subTitle))),
                        React__default.createElement("div", { className: cx('StepsItem-description', 'StepsItem-ellText'), title: typeof step.description === 'string'
                                ? step.description
                                : undefined },
                            React__default.createElement("span", null, step.description))),
                    mode === 'simple' && i < stepsRow.length - 1 && (React__default.createElement("div", { className: cx('StepsItem-icon-line') },
                        React__default.createElement(Icon, { icon: "right-arrow", className: "icon", iconContent: "StepsItem-icon-line" })))))));
    })));
}
var Steps$1 = themeable(Steps);

export { StepStatus, Steps, Steps$1 as default };
