text: import { FieldError, Form, Label, Submit, TextAreaField, TextField } from '@redwoodjs/forms/dist'
  import FormError from '@redwoodjs/forms/dist/FormError';
  import { useMutation } from '@redwoodjs/web';
  import { toast, Toaster } from '@redwoodjs/web/toast';
  import { useForm } from 'react-hook-form'
  
  const ContactPage = () => {
    const formMethods = useForm({ mode: 'onBlur' })
    const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
      onCompleted: () => {
        toast.success('Thank you for your submission!')
        formMethods.reset()
      },
    })
  
  
    const onSubmit = async (data) => {
      try {
        await create({ variables: { input: data } })
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    }
  
    return (
      <>
      <Toaster />
      <Form onSubmit={onSubmit} validation={{ mode: 'onBlur' }} error={error} formMethods={formMethods}>
        <FormError
          error={error}
          wrapperStyle={{ color: 'red', backgroundColor: 'lavenderblush' }}
        />
  <Label name="name" errorClassName="error">
          Name
        </Label>
        <TextField
          name="name"
          validation={{ required: true }}
          errorClassName="error"
        />
        <FieldError name="name" className="error" />
  
        <Label name="email" errorClassName="error">
          Email
        </Label>
        <TextField
          name="email"
          validation={{ required: true,
            pattern: {
              value: /[^@]+@[^.]+\..+/,
              message: 'Please enter a valid email address',
            },
          }}
          errorClassName="error"
        />
        <FieldError name="email" className="error" />
  
        <Label name="message" errorClassName="error">
          Message
        </Label>
        <TextAreaField
          name="message"
          validation={{ required: true }}
          errorClassName="error"
        />
        <FieldError name="message" className="error" />
  
  
        <Submit disabled={loading}>Save</Submit>
  
      </Form>
      </>
    )
  }
  
  const CREATE_CONTACT = gql`
    mutation CreateContactMutation($input: CreateContactInput!) {
      createContact(input: $input) {
        id
      }
    }
  `
  
  export default ContactPage
  