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 AskAQuestion = () => {
  const [loadForm, setLoadForm] = React.useState(false)
  const [loadThanks, setLoadThanks] = React.useState(false)
  const [currentPage, setCurrentPage] = React.useState('')

  function handleFormSubmit(e) {
    setLoadThanks(!loadThanks)
  }

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

  return (
    <FormContainer>
      {loadForm && !loadThanks ? (
        <React.Fragment>
          <form
            // action={`${currentPage}?form=success`}
            action={`/news/?category=fpv`}
            onSubmit={handleFormSubmit}
            name="article-suggestion"
            method="post"
            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
            />
            <label htmlFor="name">Name (empty for annonymous):</label>
            <input type="text" id="name" name="name" />
            <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

@@ -1528,16 +1528,165 @@
 %0A  %7D%0A%60%0A%0A
+const encode = data =%3E %7B%0A  return Object.keys(data)%0A    .map(key =%3E encodeURIComponent(key) + '=' + encodeURIComponent(data%5Bkey%5D))%0A    .join('&')%0A%7D%0A%0A
 const As
@@ -1885,41 +1885,513 @@
 '')%0A
-%0A  function handleFormSubmit(e) %7B
+  const %5Bname, setName%5D = React.useState('')%0A  const %5Bquestion, setQuestion%5D = React.useState('')%0A%0A  function handleFormSubmit(e) %7B%0A    let payload = %7B%0A      question,%0A      currentPage,%0A      name,%0A    %7D%0A%0A    fetch('/', %7B%0A      method: 'POST',%0A      headers: %7B 'Content-Type': 'application/x-www-form-urlencoded' %7D,%0A      body: encode(%7B 'form-name': 'article-suggestion', ...payload %7D),%0A    %7D)%0A      .then(() =%3E console.log('Success!'))%0A      .catch(error =%3E console.error(error))%0A%0A    e.preventDefault()
 %0A   
@@ -2615,105 +2615,8 @@
 orm%0A
-            // action=%7B%60$%7BcurrentPage%7D?form=success%60%7D%0A            action=%7B%60/news/?category=fpv%60%7D%0A
     
@@ -2693,34 +2693,8 @@
 on%22%0A
-            method=%22post%22%0A
     
@@ -3321,16 +3321,105 @@
 equired%0A
+              value=%7Bquestion%7D%0A              onChange=%7Be =%3E setQuestion(e.target.value)%7D%0A
         
@@ -3518,42 +3518,177 @@
 nput
- type=%22text%22 id=%22name%22 name=%22name%22
+%0A              type=%22text%22%0A              id=%22name%22%0A              name=%22name%22%0A              value=%7Bname%7D%0A              onChange=%7Be =%3E setName(e.target.value)%7D%0A           
  /%3E%0A
@@ -4281,26 +4281,8 @@
 ) =%3E
- %7B%0A               
  set
@@ -4304,24 +4304,8 @@
 orm)
-%0A              %7D
 %7D%0A  

Make form work with Netlify Forms