import { __assign, __extends } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Children, Component } from 'react';
import cx from 'classnames';
import Icon from '../../icon';
import { isElement } from 'react-is';
var BreadcrumbSteps = (function (_super) {
    __extends(BreadcrumbSteps, _super);
    function BreadcrumbSteps() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onStepChange = function (id) {
            var onStepChange = _this.props.onStepChange;
            onStepChange && onStepChange(id);
        };
        _this.renderStepTitle = function (itemProps, index) {
            var _a = _this.props, sequence = _a.sequence, ghost = _a.ghost;
            var icon = itemProps.icon, title = itemProps.title;
            if (icon) {
                var iconNode = typeof icon === 'string' ? (_jsx(Icon, { type: icon, className: "zent-steps-item__icon" }, void 0)) : (icon);
                return (_jsxs(_Fragment, { children: [iconNode, title] }, void 0));
            }
            if (sequence) {
                return (_jsxs(_Fragment, { children: [ghost ? (_jsx("span", __assign({ className: "zent-steps-sequence", "data-zv": 'v10.0.11' }, { children: index + 1 }), void 0)) : (index + 1 + ". "), title] }, void 0));
            }
            return title;
        };
        return _this;
    }
    BreadcrumbSteps.prototype.render = function () {
        var _this = this;
        var props = this.props;
        var className = props.className, children = props.children, current = props.current, onStepChange = props.onStepChange, type = props.type, ghost = props.ghost;
        var stepWidth = 100 / Children.count(children) + "%";
        var isBreadcrumb = type === 'breadcrumb';
        var isCard = type === 'card';
        var isTabs = type === 'tabs';
        var isBreadcrumbGhost = ghost && isBreadcrumb;
        var stepsCls = cx('zent-steps', className, {
            'zent-steps-breadcrumb': isBreadcrumb,
            'zent-steps-card': isCard,
            'zent-steps-tabs': isTabs,
            'zent-steps-breadcrumb-ghost': isBreadcrumbGhost,
        });
        return (_jsx("div", __assign({ className: stepsCls, "data-zv": 'v10.0.11' }, { children: Children.map(children, function (item, index) {
                if (!isElement(item)) {
                    return null;
                }
                var disabled = item.props.disabled;
                var isDisabled = disabled && isBreadcrumbGhost;
                var stepClassName = cx('zent-steps-item', {
                    'zent-steps-item--finished': isBreadcrumb && index <= current - 1,
                    'zent-steps-item--current': (isCard || isTabs || isBreadcrumbGhost) && index === current - 1,
                    'zent-steps-item--clickable': Boolean(onStepChange),
                    'zent-steps-item--disabled': isDisabled,
                });
                return (_jsx("div", __assign({ className: stepClassName, style: { width: stepWidth }, onClick: function () { return !isDisabled && _this.onStepChange(index + 1); }, "data-zv": 'v10.0.11' }, { children: _jsx("div", __assign({ className: "zent-steps-step", "data-zv": 'v10.0.11' }, { children: _this.renderStepTitle(item.props, index) }), void 0) }), void 0));
            }) }), void 0));
    };
    return BreadcrumbSteps;
}(Component));
export default BreadcrumbSteps;
