---
import Layout from '../../layouts/Layout.astro'
import Footer from '../../components/Footer.astro'

import Form, { type 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} /-->
  </main>
  <Footer />
</Layout>