/* @aztlan/generator-front 0.4.0 */
import * as React from 'react'
import {
  defineMessages, useIntl,
} from 'react-intl'
import {
  SimpleForm,
  addGraphQLOptions,
  withErrorHandling,
  addGraphQLValidation,
} from '@aztlan/ui'
import { graphql } from 'relay-runtime'
import { MainTemplate as Template } from '../templates/index.js'

const m = defineMessages({
  title:{
    // id: `${messagesPrefix}.title`,
    defaultMessage:'DebugFormpage',
  },
  welcome:{
    description   :'Message to greet the user.',
    defaultMessage:'Welcome to the site, {name}!!!',
  },
})

function DebugForm({
  FRUITS_OPTIONS_QUERY,
  USERNAME_VALIDATION_QUERY,
}: {
  FRUITS_OPTIONS_QUERY     :any;
  USERNAME_VALIDATION_QUERY:any;
}) {
  const { formatMessage } = useIntl()
  return (
    <>
      <h1 className="container">Form Test</h1>
      <SimpleForm
        className="container"
        defaultValues={{ fruits2: 'watermelon' }}
        fieldProps={{
          spanLabel         :6,
          spanLabelDesktop  :3,
          spanContent       :8,
          spanContentDesktop:5,
        }}
        fields={[
          {
            name        :'name',
            label       :'Your name',
            autoComplete:'name',
          },
          {
            name        :'email',
            label       :'Your email',
            autoComplete:'email',
          },
          {
            name        :'username',
            label       :'Username',
            autoComplete:'email',
            extensions  :[
              addGraphQLValidation(
                USERNAME_VALIDATION_QUERY,
                'isUsernameAvailable',
                {
                  invalidError :'This username is already taken',
                  fetchError   :'There was an error while checking the username availability',
                  responseError:"The server didn't return a valid response",
                  minLength    :4,
                },
              ),
            ],
          },
          {
            name        :'fruits',
            label       :"What's your favorite fruit?",
            autoComplete:'off',
            type        :'select',
            /*
            options     :[
              {
                label   :'Apple',
                value   :'apple',
                disabled:false,
              },
              {
                label   :'Banana',
                value   :'banana',
                disabled:false,
              },
              {
                label   :'Orange',
                value   :'orange',
                disabled:false,
              },
              {
                label   :'Pineapple',
                value   :'pineapple',
                disabled:true,
              },
            ], */
            extensions  :[
              withErrorHandling,
              addGraphQLOptions(
                FRUITS_OPTIONS_QUERY, 'fruits',
              ),
              withErrorHandling,
            ],
          },
          {
            name      :'fruits2',
            label     :"What's your favorite fruit?",
            type      :'combobox',
            extensions:[
              withErrorHandling,
              addGraphQLOptions(
                FRUITS_OPTIONS_QUERY, 'fruits',
              ),
            ],
          },
        ]}
      />
      {/*
      <h2 className="container">Vanilla </h2>
      <div className="container">
        <Formik initialValues={{ email: 'test@test.com' }}>
          <>
            <Field
              name="name"
              type="text"
            />
            <Field
              validate={validateEmail}
              name="email"
              type="email"
            />
          </>
        </Formik>
      </div>
          */}
    </>
  )
}

export default DebugForm