(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "tslib", "react", "../../icons", "../hooks/useStateProps", "./styles"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var tslib_1 = require("tslib");
    var react_1 = (0, tslib_1.__importStar)(require("react"));
    var icons_1 = require("../../icons");
    var useStateProps_1 = require("../hooks/useStateProps");
    var styles_1 = require("./styles");
    var MobileSteps = function (_a) {
        var type = _a.type, width = _a.width, steps = _a.steps, current = _a.current, getStepKey = _a.getStepKey, onChange = _a.onChange, className = _a.className, otherProps = (0, tslib_1.__rest)(_a, ["type", "width", "steps", "current", "getStepKey", "onChange", "className"]);
        var minStepValue = (0, react_1.useMemo)(function () { return (type === "progress" ? 0 : 1); }, [type]);
        var _b = (0, tslib_1.__read)((0, useStateProps_1.useStateProps)(Math.min(Math.max(current, minStepValue), steps)), 2), _current = _b[0], _setCurrent = _b[1];
        var isInitialMount = (0, react_1.useRef)(true);
        (0, react_1.useEffect)(function () {
            if (!isInitialMount.current) {
                onChange === null || onChange === void 0 ? void 0 : onChange(_current);
            }
            else {
                isInitialMount.current = false;
            }
        }, [_current]);
        var getPercent = function () { return Math.round((_current / steps) * 100); };
        var handleNext = function () { return _setCurrent(Math.min(steps, _current + 1)); };
        var handlePrevious = function () {
            return _setCurrent(Math.max(minStepValue, _current - 1));
        };
        return (react_1.default.createElement(styles_1.MobileStepsWrapper, (0, tslib_1.__assign)({ className: className, width: width, type: type }, otherProps),
            react_1.default.createElement(styles_1.StepButton, { isDisabled: _current === minStepValue, onClick: handlePrevious, icon: react_1.default.createElement(icons_1.IconBrokenArrowLeft2, null), viewType: "ghost" }),
            type === "progress" ? (react_1.default.createElement(styles_1.StepProgressStyle, { percent: getPercent() },
                react_1.default.createElement("span", { className: "step-progress-bar" }))) : (react_1.default.createElement(styles_1.StepGalleryStyle, null, Array(steps)
                .fill(0)
                .map(function (_, index) {
                var stepIndex = index + 1;
                return (react_1.default.createElement(styles_1.StepPoint, { isCurrent: _current === stepIndex, key: "step-point-" + ((getStepKey === null || getStepKey === void 0 ? void 0 : getStepKey(stepIndex)) || steps - index) }));
            }))),
            react_1.default.createElement(styles_1.StepButton, { isDisabled: _current === steps, onClick: handleNext, icon: react_1.default.createElement(icons_1.IconBrokenArrowRight3, null), viewType: "ghost" })));
    };
    exports.default = MobileSteps;
});
