import { FormStepState } from "../Types/FormStep";
import Step from "./Step";
import React from "react";
const Steps = (props) => {
    const steps = props.steps.filter((step) => {
        if (!step.showIf) {
            return true;
        }
        return step.showIf(props.formValues);
    });
    return (React.createElement("div", { className: "pr-4 py-6 sm:pr-6 lg:pr-8" },
        React.createElement("nav", { className: "flex", "aria-label": "Progress" },
            React.createElement("ol", { role: "list", className: "space-y-6" }, steps.map((step, index) => {
                const indexOfCurrentState = steps.findIndex((step) => {
                    return step.id === props.currentFormStepId;
                });
                let state = FormStepState.INACTIVE;
                if (indexOfCurrentState > index) {
                    state = FormStepState.COMPLETED;
                }
                else if (indexOfCurrentState === index) {
                    state = FormStepState.ACTIVE;
                }
                else {
                    state = FormStepState.INACTIVE;
                }
                return (React.createElement(Step, { state: state, step: step, key: index, onClick: (step) => {
                        props.onClick(step);
                    } }));
            })))));
};
export default Steps;
//# sourceMappingURL=Steps.js.map