---
import { FormControl, FormGroup } from "astro-reactive-form/core";
import Form from "astro-reactive-form";

const form = new FormGroup([
  {
    name: "username",
    label: "Username",
    placeholder: "astroIscool",
  },
  {
    name: "password",
    label: "Password",
    type: "password",
  },
]);

form.name = "Simple Form";

// insert a control
form.controls.push(
  new FormControl({
    type: "checkbox",
    name: "is-awesome",
    label: "is Awesome?",
    labelPosition: "right",
  })
);

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

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

<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
      submitControl={{
        type: "submit",
        name: "what",
      }}
      formGroups={form}
    />
    <script>
      import { getFormGroup } from "astro-reactive-form/client";

      const form = document.querySelector("form") as HTMLFormElement;
      const simpleForm = getFormGroup("Simple Form");

      form.addEventListener("submit", () => {
        const username = simpleForm?.get("username")?.value;
        const isAwesome = simpleForm?.get("is-awesome")?.value;
        alert(
          `Hi, My username is ${username}. This Library is ${
            isAwesome === "checked" ? "awesome" : "not awesome"
          }`
        );
      });
    </script>
  </body>
</html>
