import { __assign, __read, __rest } from "tslib";
import React, { useEffect, useMemo, useRef } from "react";
import { IconBrokenArrowLeft2, IconBrokenArrowRight3 } from "../../icons";
import { useStateProps } from "../hooks/useStateProps";
import { MobileStepsWrapper, StepButton, StepGalleryStyle, StepPoint, StepProgressStyle } from "./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 = __rest(_a, ["type", "width", "steps", "current", "getStepKey", "onChange", "className"]);
    var minStepValue = useMemo(function () { return (type === "progress" ? 0 : 1); }, [type]);
    var _b = __read(useStateProps(Math.min(Math.max(current, minStepValue), steps)), 2), _current = _b[0], _setCurrent = _b[1];
    var isInitialMount = useRef(true);
    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.createElement(MobileStepsWrapper, __assign({ className: className, width: width, type: type }, otherProps),
        React.createElement(StepButton, { isDisabled: _current === minStepValue, onClick: handlePrevious, icon: React.createElement(IconBrokenArrowLeft2, null), viewType: "ghost" }),
        type === "progress" ? (React.createElement(StepProgressStyle, { percent: getPercent() },
            React.createElement("span", { className: "step-progress-bar" }))) : (React.createElement(StepGalleryStyle, null, Array(steps)
            .fill(0)
            .map(function (_, index) {
            var stepIndex = index + 1;
            return (React.createElement(StepPoint, { isCurrent: _current === stepIndex, key: "step-point-" + ((getStepKey === null || getStepKey === void 0 ? void 0 : getStepKey(stepIndex)) || steps - index) }));
        }))),
        React.createElement(StepButton, { isDisabled: _current === steps, onClick: handleNext, icon: React.createElement(IconBrokenArrowRight3, null), viewType: "ghost" })));
};
export default MobileSteps;
