// Form submission handled by netlify
// https://www.netlify.com/docs/form-handling/

// TODO make it work better
// https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/
// https://github.com/imorente/gatsby-netlify-form-example/blob/master/src/pages/contact.js

import React from 'react'
import PropTypes from 'prop-types'
import Content, { HTMLContent } from '../components/Content'

export const ContactPageTemplate = ({ title, content, contentComponent }) => {
  const PageContent = contentComponent || Content

  return (
    <section className="section section--gradient">
      <div className="container">
        <div className="columns">
          <div className="column is-10 is-offset-1">
            <div className="section">
              <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
                {title}
              </h2>
              <PageContent className="content" content={content} />
              <form name="contact" data-netlify="true" netlify-honeypot="text">
                <input type="hidden" name="form-name" value="contact" />
                <div className="field hidden">
                  <input name="text" />
                </div>

                <div className="field">
                  <label className="label">Name</label>
                  <div className="control">
                    <input name="name" className="input" type="text" />
                  </div>
                </div>


                <div className="field">
                  <label className="label">Email</label>
                  <div className="control">
                    <input name="email" className="input" type="email" />
                  </div>
                </div>


                <div className="field">
                  <label className="label">Message</label>
                  <div className="control">
                    <textarea name="message" className="textarea"></textarea>
                  </div>
                </div>


                <div className="field is-grouped">
                  <div className="control">
                    <button className="button is-link">Submit</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

ContactPageTemplate.propTypes = {
  title: PropTypes.string.isRequired,
  content: PropTypes.string,
  contentComponent: PropTypes.func,
}

const ContactPage = ({ data }) => {
  const { markdownRemark: post } = data

  return (
    <ContactPageTemplate
      contentComponent={HTMLContent}
      title={post.frontmatter.title}
      content={post.html}
    />
  )
}

ContactPage.propTypes = {
  data: PropTypes.object.isRequired,
}

export default ContactPage

export const contactPageQuery = graphql`
  query ContactPage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
      }
    }
  }
`

@@ -1023,16 +1023,21 @@
 =%22true%22 
+data-
 netlify-
@@ -1050,15 +1050,128 @@
 ot=%22
-tex
+inpu
 t%22%3E%0A
+                %7B/* The %60form-name%60 hidden field is required to support form submissions without JavaScript */%7D%0A
     
@@ -1235,24 +1235,25 @@
 contact%22 /%3E%0A
+%0A
             
@@ -1261,36 +1261,16 @@
    %3C
-div className=%22field
+p
  hidden
-%22
 %3E%0A  
@@ -1298,19 +1298,20 @@
 t name=%22
-tex
+inpu
 t%22 /%3E%0A  
@@ -1326,19 +1326,17 @@
       %3C/
-div
+p
 %3E%0A%0A     

fix contact honey