import React from 'react'
import styled from 'styled-components'

const FormContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid #cecece;

  h4,
  p {
    margin: 0;
    text-align: center;
  }

  p {
    margin: 0.5rem 0 0.8rem;
    font-size: 0.8rem;
    line-height: 0.8rem;
    max-width: 37ch;
  }

  button.ask-a-question {
    min-width: 10rem;
    color: #0275d8;
    border: 2px solid #0275d8;
    margin-right: 1rem;
  }

  button.ask-a-question:hover {
    color: #fff;
    background-color: #0275d8;
  }

  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 1rem;

    h4 {
      margin-bottom: 0.3rem;
    }

    .honey-pot {
      display: none;
    }

    label[for='name'] {
      font-size: 0.8rem;
      margin-top: 1rem;
    }

    textarea {
      width: 100%;
      max-width: 450px;
    }

    input[id='name'] {
      width: 100%;
      max-width: 200px;
    }

    .submit-container {
      margin-top: 1rem;
      text-align: center;
    }

    button {
      background-color: #0175d8;
      color: #fff;
      min-width: 200px;
      padding: 0.4rem 0;
    }

    button:hover {
      background-color: #1885e2;
    }
  }

  @media (min-width: 769px) {
    flex-direction: row;

    h4,
    p {
      text-align: left;
    }

    p {
      max-width: 50ch;
    }

    form {
      textarea {
        width: 70%;
      }
    }
  }
`

const encode = data => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
    .join('&')
}

const AskAQuestion = () => {
  const [loadForm, setLoadForm] = React.useState(false)
  const [loadThanks, setLoadThanks] = React.useState(false)
  const [currentPage, setCurrentPage] = React.useState('')
  const [name, setName] = React.useState('')
  const [question, setQuestion] = React.useState('')

  function handleFormSubmit(e) {
    let payload = {
      question,
      currentPage,
      name,
    }

    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({ 'form-name': 'article-suggestion', ...payload }),
    })
      .then(() => console.log('Success!'))
      .catch(error => console.error(error))

    e.preventDefault()
    setLoadThanks(!loadThanks)
  }

  React.useEffect(() => {
    setCurrentPage(window.location.pathname)
  }, [])

  return (
    <FormContainer>
      <form
        name="article-suggestion"
        netlify
        hidden
        netlify-honeypot="bot-field"
        style={{ display: 'none' }}
      />
      {loadForm && !loadThanks ? (
        <React.Fragment>
          <form
            onSubmit={handleFormSubmit}
            name="article-suggestion"
            data-netlify="true"
            netlify-honeypot="bot-field"
          >
            <h4>Question/suggestion:</h4>
            <p className="honey-pot">
              <label>
                Don’t fill this out if you're human: <input name="bot-field" />
              </label>
            </p>
            <input type="hidden" name="form-name" value="article-suggestion" />
            <textarea
              id="question"
              name="question"
              placeholder="Can you, please..."
              maxLength="350"
              minLength="10"
              aria-label="question"
              required
              value={question}
              onChange={e => setQuestion(e.target.value)}
            />
            <label htmlFor="name">Name (empty for annonymous):</label>
            <input
              type="text"
              id="name"
              name="name"
              value={name}
              onChange={e => setName(e.target.value)}
            />
            <div className="submit-container">
              <button type="submit">Send</button>
            </div>
          </form>
        </React.Fragment>
      ) : loadThanks ? (
        <h4>Thanks for your suggestion!</h4>
      ) : (
        <React.Fragment>
          <div>
            <h4>Did I miss something?</h4>
            <p>
              Ask a question and see it updated in the article, alongside with
              credit for you.
            </p>
          </div>
          <div>
            <button
              className="ask-a-question"
              onClick={() => setLoadForm(!loadForm)}
            >
              Ask a question ❔
            </button>
          </div>
        </React.Fragment>
      )}
    </FormContainer>
  )
}

export default AskAQuestion

@@ -2009,24 +2009,48 @@
 Submit(e) %7B%0A
+    e.preventDefault()%0A%0A
     let payl
@@ -2057,16 +2057,16 @@
 oad = %7B%0A
-
       qu
@@ -2107,24 +2107,50 @@
 ame,%0A    %7D%0A%0A
+    console.log(payload)%0A%0A
     fetch('/
@@ -2414,39 +2414,16 @@
 rror))%0A%0A
-    e.preventDefault()%0A
     setL
@@ -2542,16 +2542,16 @@
 eturn (%0A
+
     %3CFor
@@ -2566,167 +2566,8 @@
 er%3E%0A
-      %3Cform%0A        name=%22article-suggestion%22%0A        netlify%0A        hidden%0A        netlify-honeypot=%22bot-field%22%0A        style=%7B%7B display: 'none' %7D%7D%0A      /%3E%0A
     

Test form submission