#Email

<Field.Email onChange={(value) => console.log('onChange', value)} />

<Field.Email
  placeholder="Enter email address..."
  onChange={(value) => console.log('onChange', value)}
/>

<Field.Email
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

<Field.Email
  label="Label text"
  value="my-m@il.com"
  onChange={(value) => console.log('onChange', value)}
/>

<Field.Email
  label="Label text"
  value="my-m@il.com"
  help={{
    title: 'Help is available',
    content:
      'Use your gifts to teach and help others. Acknowledge them as gifts (even if only in your mind). Take some time to list your strengths as well as the ways in which you could share them with the world around you and how that truly is a gift to others.',
  }}
  onChange={(value) => console.log('onChange', value)}
/>

<Field.Email
  value="my-m@il.com"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

<Field.Email
  value="Not a mail"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
/>

<Field.Email
  value="foo@bar.com"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

<Field.Email
  value="my-m@il.com"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
/>

async function mockAsyncValidator(value) {
  const request = createRequest()
  console.log('making API request to validate:', value)
  await request(3000) // Simulate a request
  console.log('API request finished')

  // Randomly validates or invalidates
  const validation = Math.random() < 0.5
  console.log('API request finished and validated to:', validation)
  if (validation) {
    return Error('This email is not valid!')
  }
}
render(
  <Form.Handler>
    <Form.Card>
      <Field.Email
        value="foo@bar.com"
        onBlurValidator={mockAsyncValidator}
      />
    </Form.Card>

    <Form.SubmitButton />
  </Form.Handler>,
)