text: import { Input, Textarea } from '@chakra-ui/core'
  import {
    FieldError,
    Form,
    FormError,
    Label,
    Submit,
    TextField,
    TextAreaField,
    useFlash,
    useMutation,
  } from '@redwoodjs/web'
  import { useForm } from 'react-hook-form'
  import BlogLayout from 'src/layouts/BlogLayout'
  
  const ContactPage = () => {
    const formMethods = useForm()
    const CREATE_CONTACT = gql`
      mutation CreateContactMutation($input: CreateContactInput!) {
        createContact(input: $input) {
          id
        }
      }
    `
  
    const { addMessage } = useFlash()
  
    const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
      onCompleted: () => {
        addMessage('Thank you for your submission!', {
          classes: 'success-style',
        })
        formMethods.reset()
      },
    })
  
    const onSubmit = (data) => {
      create({ variables: { input: data } })
      console.log(data)
    }
  
    return (
      <BlogLayout>
        <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>
          <Input
            as={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: /[^@]+@[^.]+\..+/,
              },
            }}
            errorClassName="error"
          />
          <FieldError name="email" className="error" />
          <Label name="message" errorClassName="error">
            Message
          </Label>
          <Textarea
            as={TextAreaField}
            name="message"
            validation={{ required: true }}
            errorClassName="error"
          />
          <FieldError name="message" className="error" />
          <Submit disabled={loading}>Save</Submit>
        </Form>
      </BlogLayout>
    )
  }
  
  export default ContactPage
  