text: import React from 'react'
  import styled, { css } from 'styled-components'
  import { Button } from '../layouts/style'
  
  const sharedInput = css`
    display: block;
    width: 100%;
    padding: 0.5em;
    margin: 0.5em 0 1em 0;
    outline: none;
    color: #777777;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    box-sizing: border-box;
  `
  
  const Input = styled.input`
    ${sharedInput};
  `
  const Textarea = styled.textarea`
    ${sharedInput};
  `
  
  const encode = data =>
    Object.keys(data)
      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
      .join('&')
  
  class ContactForm extends React.Component {
    constructor(props) {
      super(props)
      this.state = { name: '', email: '', message: '' }
  
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    /* Here’s the juicy bit for posting the form submission */
  
    handleSubmit(e) {
      if (this.state.email === '' || this.state.name === '') {
        /* eslint-disable-next-line no-alert */
        alert('Upps, ein zwingendes Feld ist noch nicht ausgefüllt.')
      } else {
        const body = encode({ 'form-name': 'contact', ...this.state })
        fetch('/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          body,
        })
          .then(() => {
            /* eslint-disable-next-line no-alert */
            alert(
              'Danke! Wir haben Ihre Nachricht erhalten und melden uns so bald wie möglich bei Ihnen.'
            )
            this.setState({ name: '', email: '', message: '' })
          })
          .catch(error => {
            /* eslint-disable-next-line no-console */
            console.log('Error', error)
            /* eslint-disable-next-line no-alert */
            alert(
              `Leider hat dies nicht funktioniert. Entschuldigen Sie die Umstände. Wenn Sie uns auf info@apptiva.ch ein Email schicken melden wir uns sofort bei Ihnen.`
            )
          })
      }
      e.preventDefault()
    }
  
    handleChange(e) {
      this.setState({ [e.target.name]: e.target.value })
    }
  
    render() {
      const { name, email, message } = this.state
      return (
        <form
          name="contact"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          onSubmit={this.handleSubmit}
        >
          <p>
            <label htmlFor="name">
              Ihr Name (Pflichtfeld){' '}
              <Input
                type="text"
                name="name"
                value={name}
                onChange={this.handleChange}
              />
            </label>
          </p>
          <p>
            <label htmlFor="email">
              Ihre Email-Adresse (Pflichtfeld){' '}
              <Input
                type="email"
                name="email"
                value={email}
                onChange={this.handleChange}
              />
            </label>
          </p>
          <p>
            <label htmlFor="message">
              Ihre Nachricht{' '}
              <Textarea
                name="message"
                value={message}
                onChange={this.handleChange}
              />
            </label>
          </p>
          <p>
            <Button type="submit">Senden</Button>
          </p>
        </form>
      )
    }
  }
  
  export default ContactForm
  