---
import Nav from "../components/Nav.astro";
import Form, { FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";

const baseForm = new FormGroup([
  {
    name: "crust",
    label: "Crust",
    type: "radio",
    options: [{ label: "Garlic", value: "garlic" }],
  },
  {
    name: "size",
    label: "Size",
    type: "radio",
    options: ["Small", "Medium", "Large"],
  },
  {
    name: "sauce",
    label: "Sauce",
    type: "radio",
    options: ["Tomato", "Barbeque"],
  },
]);

const toppingsForm = new FormGroup([
  {
    name: "mushrooms",
    label: "Mushrooms",
    type: "checkbox",
  },
  {
    name: "extraCheese",
    label: "Extra Cheese",
    type: "checkbox",
  },
  {
    name: "onions",
    label: "Onions",
    type: "checkbox",
  },
  {
    name: "peppers",
    label: "Peppers",
    type: "checkbox",
  },
  {
    name: "pepperoni",
    label: "Pepperoni",
    type: "checkbox",
  },
  {
    name: "sausage",
    label: "Sausage",
    type: "checkbox",
  },
  {
    name: "chicken",
    label: "Chicken",
    type: "checkbox",
  },
  {
    name: "pineapple",
    label: "Pineapple",
    type: "checkbox",
  },
]);

const infoForm = new FormGroup([
  {
    name: "name",
    label: "Name",
    validators: [Validators.required],
  },
  {
    name: "address",
    label: "Delivery Address",
    validators: [Validators.required],
  },
  {
    name: "contact",
    label: "Contact Number",
    validators: [Validators.required],
  },
]);

baseForm.name = "Base";
toppingsForm.name = "Toppings";
infoForm.name = "Customer Info";
infoForm.get("contact")?.setValidators([Validators.minLength(9)]);
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <Nav />
    <h1>Pizza Form Demo</h1>
    <Form
      showValidationHints={true}
      formGroups={[baseForm, toppingsForm, infoForm]}
    />
  </body>
</html>
