import React from 'react';
import i18n from 'ui-i18n';
import { any, drop, propOr } from 'ramda';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepButton from '@mui/material/StepButton';
import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button';
import { ProgressButton } from './components/ProgressButton';
import { useStyles } from './styles';
export var StepNavigation = function (_a) {
    var activeStep = _a.activeStep, steps = _a.steps, _b = _a.isPending, isPending = _b === void 0 ? false : _b, _c = _a.shouldCompleteSteps, shouldCompleteSteps = _c === void 0 ? true : _c, onConfirm = _a.onConfirm, onChangeStep = _a.onChangeStep;
    var styles = useStyles();
    var isLastStep = activeStep === steps.length - 1;
    var setActiveStep = function (step) {
        if (step !== activeStep) {
            onChangeStep(step);
        }
    };
    var isEnabled = propOr(true, 'enabled');
    var onBack = function (currentStep) {
        if (currentStep > 0) {
            var prevStep = currentStep - 1;
            if (isEnabled(steps[prevStep])) {
                setActiveStep(prevStep);
            }
            else {
                onBack(prevStep);
            }
        }
    };
    var onNext = function (currentStep) {
        if (currentStep < steps.length - 1) {
            var nextStep = currentStep + 1;
            if (isEnabled(steps[nextStep])) {
                setActiveStep(nextStep);
            }
            else {
                onNext(nextStep);
            }
        }
    };
    var showConfirm = isLastStep && !!onConfirm;
    var isNextButtonEnabled = showConfirm || any(isEnabled, drop(activeStep + 1, steps));
    return (React.createElement("div", { className: styles.container },
        React.createElement("div", { className: styles.placeholder }),
        React.createElement(Stepper, { nonLinear: true, activeStep: activeStep, className: styles.stepper }, steps.map(function (_a, index) {
            var label = _a.label, _b = _a.enabled, enabled = _b === void 0 ? true : _b, hasError = _a.hasError, hasWarning = _a.hasWarning;
            var disabledStep = !enabled || isPending;
            var completedStep = shouldCompleteSteps && !disabledStep && index < activeStep;
            return (React.createElement(Step, { key: label, completed: completedStep, disabled: disabledStep },
                React.createElement(StepButton, { className: styles.stepButton, onClick: function () { return setActiveStep(index); }, "data-reltio-id": "reltio-search-bulk-update-".concat(index) },
                    React.createElement(StepLabel, { error: hasError || hasWarning, classes: { error: hasError ? styles.errorLabel : styles.warningLabel } }, label))));
        })),
        React.createElement("div", { className: styles.buttons },
            activeStep > 0 && (React.createElement(Button, { variant: "outlined", className: styles.backButton, onClick: function () { return onBack(activeStep); }, disabled: isPending, "data-reltio-id": "reltio-search-bulk-update-back" }, i18n.text('Back'))),
            React.createElement(ProgressButton, { variant: "contained", color: "primary", disabled: !isNextButtonEnabled, isInProgress: isPending, onClick: isLastStep ? onConfirm : function () { return onNext(activeStep); }, "data-reltio-id": "reltio-search-bulk-update-".concat(isLastStep ? 'confirm' : 'continue') }, showConfirm ? i18n.text('Confirm') : i18n.text('Continue')))));
};
