---
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";
import Back from "../../components/Back.astro";
import { FormGroup, ControlConfig } from "astro-reactive-form/core";
import Form from "astro-reactive-form";

const simpleForm = new FormGroup([
  {
    name: "simple-text",
    label: "Simple Text Control",
  },
  {
    name: "a-checkbox",
    label: "A Checkbox with Label on the left",
    type: "checkbox",
    value: "checked",
  },
]);

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

const characteristics: ControlConfig[] = [
  {
    name: "is-good-looking",
    type: "radio",
    label: "Is Good Looking?",
    value: "checked",
    labelPosition: "right",
  },
  {
    name: "is-awesome",
    type: "checkbox",
    label: "Is Awesome?",
    value: "checked",
    labelPosition: "right",
  },
];

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

<Layout title="Ayo Ayco | Showcase | Astro Reactive Form">
  <main>
    <Back url="/showcase" />
    <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/ayoayco/astro-reactive-library"
          >astro-reactive-library</a
        >
      </li>
      <li>
        NPM registry: <a href="https://npmjs.org/package/@astro-reactive/form"
                         >@astro-reactive/form</a
        >
      </li>
    </ul>

    <h2>Simple single form group</h2>
    <Form formGroups={simpleForm} />

    <h2>Multiple Form Groups</h2>
    <Form formGroups={[nameForm, characteristicsForm]} />

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