---
import Nav from "../components/Nav.astro";
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: "5",
    options: ["1", "2", "3", "4", "5"],
  },
  {
    name: "agreement",
    label: "Agreement",
    type: "radio",
    value: "yes",
    options: [
      { label: "Agree", value: "yes" },
      { label: "Disagree", value: "no" },
    ],
  },
  {
    name: "size",
    label: "Size",
    type: "dropdown",
    options: ["S", "M", "L", "XL", "XXL"],
    placeholder: "-- Please choose an option --",
  },
  {
    name: "comment",
    label: "Feedback",
    type: "textarea",
    value: "Nice!"
  },
]);

form.name = "Simple Form";

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

// 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");

// switch between light and dark mode
const theme = "dark";
---

<html lang="en" class={theme}>
  <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 class={theme}>
    <Nav />
    <h1>Astro Reactive Form</h1>
    <Form showValidationHints={true} formGroups={form} theme={theme} />
    <style>
      html.dark,
      body.dark {
        color-scheme: dark;
      }
    </style>
  </body>
</html>
