text: import BlogLayout from 'src/layouts/BlogLayout'
  
  import { useForm } from 'react-hook-form'
  import {
    Form,
    TextField,
    TextAreaField,
    Submit,
    FieldError,
    Label,
    FormError,
  } from '@redwoodjs/web'
  import { useMutation } from '@redwoodjs/web'
  
  const CREATE_CONTACT = gql`
    mutation CreateContactMutation($input: ContactInput!) {
      createContact(input: $input) {
        id
      }
    }
  `
  
  const ContactPage = (props) => {
    const formMethods = useForm({ mode: 'onBlur' })
    const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
      onCompleted: () => {
        alert('Thank you for your submission!')
        formMethods.reset()
      },
    })
  
    const onSubmit = (data) => {
      create({ variables: { input: data } })
      console.log(data)
    }
  
    return (
      <BlogLayout>
        <h1>Contact Me</h1>
        <Form
          onSubmit={onSubmit}
          validation={{ mode: 'onBlur' }}
          error={error}
          formMethods={formMethods}
        >
          <FormError
            error={error}
            wrapperStyle={{ color: 'red', backgroundColor: 'lavenderblush' }}
          />
  
          <Label
            name="name"
            style={{ display: 'block' }}
            errorStyle={{ display: 'block', color: 'red' }}
          >
            Name
          </Label>
          <TextField
            name="name"
            validation={{ required: true }}
            style={{ display: 'block' }}
            errorStyle={{ display: 'block', borderColor: 'red' }}
          />
          <FieldError name="name" style={{ color: 'red' }} />
  
          <Label
            name="email"
            style={{ display: 'block' }}
            errorStyle={{ display: 'block', color: 'red' }}
          >
            Email
          </Label>
          <TextField
            name="email"
            validation={{
              required: true,
              pattern: {
                value: /[^@]+@[^.]+\..+/,
                message: 'Please enter a valid email address',
              },
            }}
            style={{ display: 'block' }}
            errorStyle={{ display: 'block', borderColor: 'red' }}
          />
          <FieldError name="email" style={{ color: 'red' }} />
  
          <Label
            name="animal"
            style={{ display: 'block' }}
            errorStyle={{ display: 'block', color: 'red' }}
          >
            Spirit Animal
          </Label>
          <TextField
            name="animal"
            style={{ display: 'block' }}
            validation={{ required: true }}
            errorStyle={{ display: 'block', color: 'red' }}
          />
          <FieldError name="animal" style={{ color: 'red' }} />
  
          <Label
            name="message"
            style={{ display: 'block' }}
            errorStyle={{ display: 'block', color: 'red' }}
          >
            Message
          </Label>
          <TextAreaField
            name="message"
            validation={{ required: true }}
            style={{ display: 'block' }}
            errorStyle={{ display: 'block', borderColor: 'red' }}
          />
          <FieldError name="message" style={{ color: 'red' }} />
  
          <Submit style={{ display: 'block' }} disabled={loading}>
            Send
          </Submit>
        </Form>
      </BlogLayout>
    )
  }
  
  export default ContactPage
  