import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { createContext, useCallback, useContext, useLayoutEffect, useState, } from "react";
import CreateScreen from "../screens/util";
import { Button } from "./button";
const ConfigureStepContext = createContext(undefined);
function useOnboardingStep(controls) {
    const configure = useContext(ConfigureStepContext);
    const { canContinue, onContinue } = controls;
    if (!configure) {
        throw new Error("useOnboardingStep must be used inside OnboardingFlow");
    }
    useLayoutEffect(() => {
        configure({ canContinue, onContinue });
    }, [canContinue, configure, onContinue]);
}
function defaultControls(step) {
    return { canContinue: step.defaultCanContinue ?? true };
}
function OnboardingFlow({ steps, onFinish, }) {
    if (steps.length === 0) {
        throw new Error("OnboardingFlow requires at least one step");
    }
    const [stepIndex, setStepIndex] = useState(0);
    const [controls, setControls] = useState(() => defaultControls(steps[0]));
    const [pending, setPending] = useState(false);
    const activeStep = steps[stepIndex];
    const configure = useCallback((next) => {
        setControls(next);
    }, []);
    const showStep = useCallback((nextIndex) => {
        setControls(defaultControls(steps[nextIndex]));
        setStepIndex(nextIndex);
    }, [steps]);
    const advance = useCallback(async () => {
        if (!controls.canContinue || pending)
            return;
        setPending(true);
        try {
            const result = await controls.onContinue?.();
            if (result === false)
                return;
            if (stepIndex === steps.length - 1) {
                await onFinish();
            }
            else {
                showStep(stepIndex + 1);
            }
        }
        finally {
            setPending(false);
        }
    }, [controls, onFinish, pending, showStep, stepIndex, steps.length]);
    return (_jsx(CreateScreen, { className: "h-full w-full items-stretch justify-stretch", children: _jsxs("div", { className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("main", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", "data-onboarding-step": activeStep.id, children: [_jsxs("header", { className: "mx-auto flex w-full max-w-6xl items-start gap-4 px-6 pt-12 pb-7 md:px-10 md:pt-16", children: [activeStep.logo, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { "data-onboarding-title": true, className: "font-heading text-3xl font-bold md:text-4xl", children: activeStep.title }), activeStep.description && (_jsx("div", { className: "mt-2 text-lg text-muted-foreground", children: activeStep.description }))] })] }), _jsx(ConfigureStepContext.Provider, { value: configure, children: _jsx("div", { className: "mx-auto w-full max-w-6xl px-6 pb-12 md:px-10", children: activeStep.content }) })] }), _jsxs("footer", { className: "shrink-0 px-6 pt-4 pb-6 md:px-10", children: [_jsx("div", { className: "flex justify-center md:justify-end", children: _jsx(Button, { size: "lg", className: "w-full md:w-auto", disabled: !controls.canContinue || pending, onClick: () => void advance(), children: "Continue" }) }), _jsxs("nav", { className: "mt-4 hidden items-center justify-center gap-2 md:flex", "aria-label": "Onboarding steps", children: [_jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": "Previous onboarding step", disabled: stepIndex === 0 || pending, onClick: () => showStep(stepIndex - 1), children: _jsx(ChevronLeft, {}) }), _jsxs("span", { className: "min-w-12 text-center text-sm", "aria-live": "polite", children: [stepIndex + 1, "/", steps.length] }), _jsx(Button, { size: "icon-sm", variant: "ghost", "aria-label": "Next onboarding step", disabled: !controls.canContinue || pending, onClick: () => void advance(), children: _jsx(ChevronRight, {}) })] })] })] }) }));
}
export { OnboardingFlow, useOnboardingStep, };
