---
import Form, {
  ControlConfig,
  FormGroup,
  FormControl,
} from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";

const form = new FormGroup([
  {
    name: "username",
    label: "Username",
    validators: [Validators.required],
  },
  {
    name: "email",
    label: "Email",
    validators: [Validators.email, Validators.required],
  },
  {
    name: "password",
    label: "Password",
    type: "password",
    validators: [Validators.required, Validators.minLength(8)],
  },
  {
    name: "rating",
    label: "Rating",
    type: "radio",
    value: ["1", "2", "3", "4", "5"],
  },
  {
    name: "agreement",
    label: "Agreement",
    type: "radio",
    value: [
      { label: "Agree", value: "yes" },
      { label: "Disagree", value: "no", labelPosition: "right" },
    ],
  },
]);

form.name = "Simple Form";

const config: ControlConfig = {
  type: "checkbox",
  name: "is-awesome",
  label: "is Awesome?",
  labelPosition: "right",
};

// insert a control
form.controls.push(new FormControl(config));

// get the FormControl object
const userNameControl = form.get("username");

// set values dynamically
userNameControl?.setValue("RAMOOOON");
form.get("is-awesome")?.setValue("checked");

// setting an invalid value will cause errors as server-rendered
form.get("email")?.setValue("invalid-email");
---

<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>
    <h1>Astro Reactive Form</h1>
    <Form showValidationHints={true} formGroups={form} />
  </body>
</html>
