import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/// <reference path="./Stepper.component.d.ts" />
import { createContext, useContext, useState } from 'react';
import { Steppers } from './Steppers.component';
import { Box } from '../box/Box';
if (!window.StepperContext) {
    window.StepperContext = createContext(null);
}
//@ts-ignore
export const useStepper = (index, steps) => {
    const context = useContext(window.StepperContext);
    if (context === null) {
        throw new Error('Cannot use useStepper outside of Stepper');
    }
    const { next, prev } = context;
    return { next, prev };
};
export const Stepper = ({ steps }) => {
    const [stepProps, setStepProps] = useState({ step: 0, props: {} });
    const next = (props) => {
        setStepProps({ step: stepProps.step + 1, props });
    };
    const prev = (props) => {
        setStepProps({ step: stepProps.step - 1, props });
    };
    const { Component } = steps[stepProps.step];
    const StepperContext = window.StepperContext;
    return (_jsx(StepperContext.Provider, { value: { next, prev }, children: _jsxs(Box, { display: "flex", gap: 32, flex: 1, height: "100%", children: [_jsx(Steppers, { activeStep: stepProps.step, steps: steps.map((step) => {
                        return {
                            title: step.label,
                        };
                    }) }), _jsx(Component, { ...stepProps.props })] }) }));
};
