import { useState } from "react";
import { Checkbox } from "../../base/checkbox/checkbox";
import { Input } from "../../base/input/input";
import { Select } from "../../base/select/select";
import type { SelectItemType } from "../../base/select/select-shared";
import { Stepper } from "./stepper";

export const CheckoutExample = () => {
    const [activeStep, setActiveStep] = useState(0);
    const [form, setForm] = useState<CheckoutState>(initialState);

    const canAdvance = (step: number) => {
        if (step === 0) return form.fullName.trim() !== "" && form.address.trim() !== "" && form.shippingMethod !== null;
        if (step === 1) return form.cardNumber.trim().length >= 4;
        return true;
    };

    return (
        <Stepper totalSteps={3} activeStep={activeStep} onStepChange={setActiveStep} canAdvance={canAdvance} className="max-w-xl">
            <Stepper.Steps aria-label="Checkout progress">
                <Stepper.Step index={0} title="Shipping" description="Where to send it" />
                <Stepper.Step index={1} title="Payment" description="How you'll pay" />
                <Stepper.Step index={2} title="Review" description="Confirm your order" optional />
            </Stepper.Steps>

            <Stepper.Content index={0} className="gap-4">
                <Input label="Full name" isRequired value={form.fullName} onChange={(fullName) => setForm((state) => ({ ...state, fullName }))} />
                <Input label="Address" isRequired value={form.address} onChange={(address) => setForm((state) => ({ ...state, address }))} />
                <Select
                    label="Shipping method"
                    isRequired
                    placeholder="Choose a method"
                    items={shippingMethods}
                    selectedKey={form.shippingMethod}
                    onSelectionChange={(key) => setForm((state) => ({ ...state, shippingMethod: key as string }))}
                >
                    {(item) => <Select.Item id={item.id}>{item.label}</Select.Item>}
                </Select>
            </Stepper.Content>

            <Stepper.Content index={1} className="gap-4">
                <Input
                    label="Card number"
                    isRequired
                    placeholder="1234 1234 1234 1234"
                    value={form.cardNumber}
                    onChange={(cardNumber) => setForm((state) => ({ ...state, cardNumber }))}
                />
                <Checkbox
                    label="Save this card for next time"
                    isSelected={form.saveCard}
                    onChange={(saveCard) => setForm((state) => ({ ...state, saveCard }))}
                />
            </Stepper.Content>

            <Stepper.Content index={2} className="gap-4">
                <div className="ring-secondary rounded-lg p-4 ring-1 ring-inset">
                    <p className="text-secondary text-sm font-semibold">{form.fullName || "—"}</p>
                    <p className="text-tertiary text-sm">{form.address || "—"}</p>
                    <p className="text-tertiary text-sm">Card ending in {form.cardNumber.slice(-4) || "----"}</p>
                </div>
                <Checkbox
                    label="I agree to the terms and conditions"
                    isSelected={form.agreeToTerms}
                    onChange={(agreeToTerms) => setForm((state) => ({ ...state, agreeToTerms }))}
                />
            </Stepper.Content>

            <Stepper.Controls onFinish={() => alert("Order placed!")} />
        </Stepper>
    );
};
Stepper components

How is Stepper different from ProgressSteps?

How do I validate a step before Next advances past it?

What's the difference between linear and non-linear?

Can I control the active step myself?

How do I mark a step as optional?

Does it set aria-current correctly?
