CurrencyInput

"use client";

import { useState } from "react";
import {
  useForm,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Form,
  CurrencyInput,
  FormError,
  FormSubmit
} from "@pimolu/react";

interface BudgetValues {
  budget: number | null;
}

function BudgetForm() {
  const [saved, setSaved] = useState(false);
  const form = useForm<BudgetValues>({
    defaultValues: { budget: 2500 },
    validate: (values) => {
      if(values.budget === null) {
        return { budget: "Enter a monthly budget." };
      }
      if(values.budget < 500) {
        return {
          budget: "The minimum monthly budget is $500.",
        };
      }
      return undefined;
    },
    onSubmit: async () => {
      await new Promise((resolve) => setTimeout(resolve, 600));
      setSaved(true);
    },
  });
  return (
    <Card>
      <CardHeader>
        <CardTitle>Campaign budget</CardTitle>
        <CardDescription>
          The currency field clamps on blur, while Form validates the
          business rule on submit.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Form form={form} className="grid gap-5 min-w-0">
          <CurrencyInput
            label="Monthly budget"
            currency="USD"
            locale="en-US"
            min={0}
            max={50000}
            value={form.values.budget}
            onValueChange={(value) => form.setValue(
              "budget",
              value
            )}
            invalid={Boolean(form.errors.budget)}
            aria-describedby={form.errors.budget
              ? `${form.formId}-budget-error`
              : undefined}
            helperText="Between $0 and $50,000."
            required
            fullWidth
          />
          <FormError name="budget" />
          <FormSubmit>Save budget</FormSubmit>
          {
            saved && form.values.budget !== null && (<p role="status">
              Budget saved: {
                form.values.budget.toLocaleString(
                  "en-US",
                  {
                    style: "currency",
                    currency: "USD",
                  }
                )
              }
              .
            </p>)
          }
        </Form>
      </CardContent>
    </Card>
  );
}

export function DemoExample() {
  return (<BudgetForm />);
}