import { __assign, __read, __rest } from "tslib";
import React, { useEffect, useRef } from "react";
import { useStateProps } from "../hooks/useStateProps";
import { StepWrapper } from "./styles";
import StepItem from "./components/StepItem";
var Steps = function (_a) {
    var size = _a.size, current = _a.current, onItemClick = _a.onItemClick, getItemDisabled = _a.getItemDisabled, getItemTitle = _a.getItemTitle, getItemStatus = _a.getItemStatus, onChangeCurrent = _a.onChangeCurrent, getItemKey = _a.getItemKey, getItemOnClick = _a.getItemOnClick, className = _a.className, classNameItem = _a.classNameItem, width = _a.width, height = _a.height, _b = _a.direction, direction = _b === void 0 ? "horizontal" : _b, steps = _a.steps, otherProps = __rest(_a, ["size", "current", "onItemClick", "getItemDisabled", "getItemTitle", "getItemStatus", "onChangeCurrent", "getItemKey", "getItemOnClick", "className", "classNameItem", "width", "height", "direction", "steps"]);
    var _c = __read(useStateProps(Math.min(Math.max(current, 1), steps.length)), 2), _current = _c[0], _setCurrent = _c[1];
    var isInitialMount = useRef(true);
    useEffect(function () {
        if (!isInitialMount.current) {
            var item = steps.slice(_current - 1)[0];
            item && (onChangeCurrent === null || onChangeCurrent === void 0 ? void 0 : onChangeCurrent(item));
        }
        else {
            isInitialMount.current = false;
        }
    }, [_current]);
    var getNewProps = function (item, _index) {
        var _a, _b;
        var stepNumber = _index + 1;
        var status = (_a = getItemStatus === null || getItemStatus === void 0 ? void 0 : getItemStatus(item)) !== null && _a !== void 0 ? _a : (item.status || (stepNumber < current && "completed") || "waiting");
        var isDisabled = (_b = getItemDisabled === null || getItemDisabled === void 0 ? void 0 : getItemDisabled(item)) !== null && _b !== void 0 ? _b : item.isDisabled;
        var title = (getItemTitle === null || getItemTitle === void 0 ? void 0 : getItemTitle(item)) || item.title;
        var stepOnClick = function (event) {
            var _a;
            getItemOnClick
                ? (_a = getItemOnClick(item)) === null || _a === void 0 ? void 0 : _a(event, item)
                : onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(event, item);
        };
        var _onChangeCurrent = function () {
            _setCurrent(stepNumber);
        };
        return __assign(__assign({}, item), { size: size, stepOnClick: stepOnClick, status: status, isCurrent: stepNumber === _current, direction: direction, stepNumber: stepNumber, title: title, isLast: stepNumber === (steps === null || steps === void 0 ? void 0 : steps.length), isDisabled: isDisabled || (!item.status && stepNumber > current), onChangeCurrent: _onChangeCurrent });
    };
    return (React.createElement(StepWrapper, __assign({ direction: direction, height: height, className: className, width: width }, otherProps), (steps === null || steps === void 0 ? void 0 : steps.length) > 0 &&
        steps.map(function (step, index) {
            var props = getNewProps(step, index);
            return (React.createElement(React.Fragment, { key: (getItemKey === null || getItemKey === void 0 ? void 0 : getItemKey(step)) || step.key },
                React.createElement(StepItem, __assign({ className: classNameItem }, props))));
        })));
};
export default Steps;
