---
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";

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

const simpleForm = new FormGroup([
  {
    name: "simple-text",
    label: "Simple Text Control",
  },
  {
    name: "email",
    label: "Email",
    value: "invalid-email",
    validators: [Validators.email],
  },
]);

const name: ControlConfig[] = [
  {
    name: "first-name",
    value: "Ayo",
    label: "First Name",
    validators: [Validators.required],
  },
  {
    name: "last-name",
    label: "Last Name",
    validators: [Validators.required],
  },
];

const characteristics: ControlConfig[] = [
  {
    name: "is-good-looking",
    type: "radio",
    label: "Is Good Looking?",
    value: "checked",
    options: [
      { value: "checked", label: "checked" },
      { value: "not checked", label: "not checked" },
    ],
  },
  {
    name: "required",
    label: "Required Field",
    placeholder: "but empty 😔",
    validators: [Validators.required],
  },
  {
    name: "is-awesome",
    type: "checkbox",
    label: "Is Awesome?",
    value: "checked",
  },
];

const nameForm: FormGroup = new FormGroup(name, "Name");
const characteristicsForm: FormGroup = new FormGroup(
  characteristics,
  "Characteristics"
);
---

<Layout
  title="Astro Reactive Form"
  description="Generate a dynamic form based on your data, and modify programatically"
>
  <main>
    <h1>Astro Reactive Form</h1>
    <p>
      Generate a dynamic form based on your data, and modify programatically
    </p>
    <ul>
      <li>
        GitHub repo: <a href="https://github.com/astro-reactive/astro-reactive"
          >astro-reactive</a
        >
      </li>
      <li>
        NPM registry:
        <ul>
          <li>
            <a href="https://npmjs.org/package/@astro-reactive/form"
              >@astro-reactive/form</a
            >
          </li>
          <li>
            <a href="https://npmjs.org/package/@astro-reactive/validator"
              >@astro-reactive/validator</a
            >
          </li>
        </ul>
      </li>
    </ul>

    <h2>Simple single form group</h2>
    <p>Here's an example of a simple form with email validation</p>
    <Form showValidationHints validateOnLoad formGroups={simpleForm} />
    <!--Code lang="typescript" theme="github-light" code={simpleFormCode} /-->

    <h2>Multiple Form Groups</h2>
    <p>Here's a more complex example of a form with multiple fieldsets</p>
    <Form
      showValidationHints
      validateOnLoad
      formGroups={[nameForm, characteristicsForm]}
    />
    <!--Code lang="typescript" theme="dark-plus" code={multipleFormGroupCode} /-->

    <Footer />
  </main>
</Layout>
