import indexStyles from '../styles/index.module.css'
import React from 'react';
import ReCAPTCHA from "react-google-recaptcha";

export default function ContactForm() {
  const recaptchaRef = React.createRef();

  const sendMessage = async event => {
      event.preventDefault()

      var payload = JSON.stringify({
        g_recaptcha_response: recaptchaRef.current.getValue(),
        sender_email: event.target.sender_email.value,
        message: event.target.message.value
      })

      const res = await fetch('/contact', {
        body: payload,
        headers: {'Content-type': 'application/json'},
        method: 'POST'
      })

      const result = await res.json()
      event.target.parent().append("<p>" + result.message + "<p>")
      event.target.remove()
  }
  return (
    <section id="contact" name="Contact" className={indexStyles.contactForm}>
      <h2>Contact Me</h2>
      <form id="contactForm" onSubmit={sendMessage}>
        <label htmlFor="sender_email">Your Email:</label>
        <br/>
        <input type="email" name="sender_email" id="sender_email" className={indexStyles.contactField}
            placeholder="Your e-mail address"></input>
        <br/>
        <label htmlFor="message">Message:</label>
        <br/>
        <textarea name="message" id="message" className={indexStyles.contactField}
            placeholder="Send me a message ..."></textarea>
        <ReCAPTCHA
            ref={recaptchaRef}
            sitekey="6LcNyA8UAAAAAPm_QpkDTYZba8S6aPy75QXMe0zT"
          />
        <br/>
        <button className={indexStyles.formButton} id="send-message" type="submit">Send</button>
      </form>
    </section>
  )
}