import React from 'react'
import axios from 'axios'
import 'semantic-ui-less/semantic.less'
import { Message } from 'semantic-ui-react'
import ReCaptcha from 'react-google-invisible-recaptcha';
import {
  formSubmittedEvent,
  formSubmittedIdentifyCall,
  linkedInConversionTrackingEvent
} from '../segment/index';

class Contact extends React.Component {
  constructor(props) {
    super(props)
    this.domRef = React.createRef()
    this.state = { feedbackMsg: null, isChecked: true }
    this.handleClick = this.handleClick.bind(this)
  }
  encode(data) {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&')
  }

  handleClick() {
    console.log(this.state.isChecked)
    this.setState(prevState => ({
      isChecked: !prevState.isChecked
    }))
    if (!this.state.isChecked) {
      document.getElementById('mailinglist').setAttribute('value', 'on')
    } else {
      document.getElementById('mailinglist').setAttribute('value', 'off')
    }
  }

  handleSubmit(event) {
    // Do not submit form via HTTP, since we're doing that via XHR request.
    event.preventDefault()
    this.recaptcha.execute()
    // Loop through this component's refs (the fields) and add them to the
    // formData object. What we're left with is an object of key-value pairs
    // that represent the form data we want to send to Netlify.
    const formData = {}
    Object.keys(this.refs).map(key => (formData[key] = this.refs[key].value))

    formSubmittedIdentifyCall(formData, this.state.isChecked)
    formSubmittedEvent(formData, this.state.isChecked)
    linkedInConversionTrackingEvent()

    const axiosOptions = {
      url: window.location.href,
      method: 'post',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      data: this.encode(formData)
    }

    console.log(axiosOptions)
    console.log(formData)
    // Submit to Netlify. Upon success, set the feedback message and clear all
    // the fields within the form. Upon failure, keep the fields as they are,
    // but set the feedback message to show the error state.

    axios(axiosOptions)
      .then(response => {
        console.log(formData)
        console.log(formData.mailinglist)
        this.setState({
          feedbackMsg: "Thank you! We'll reach out to you shortly."
        })
        this.domRef.current.reset()
      })
      .catch(err => {
        console.log(err)
      })
  }
  onResolved = () => {
    this.setState({ messageSent: true })
    console.log(this.state)
  }
  render() {
    return (
      <div>
        <form
          className="ui form"
          ref={this.domRef}
          name="New Contact"
          method="POST"
          data-netlify="true"
          netlify-honeypot="bot-field"
          onSubmit={event => this.handleSubmit(event)}
        >
          <input
            ref="form-name"
            type="hidden"
            name="form-name"
            value="New Contact"
          />
          <p class="hidden">
            {/* <label><input ref="pathname" type="text" name="pathname" value={window.location.href} /></label> */}
            <label>
              Don’t fill this out: <input ref="bot-field" name="bot-field" />
            </label>
          </p>
          <div className="two fields">
            <p className="field">
              <input
                ref="first-name"
                type="text"
                placeholder="First Name"
                name="first-name"
                required
              />
            </p>
            <p className="field">
              <input
                ref="last-name"
                type="text"
                placeholder="Last Name"
                name="last-name"
                required
              />
            </p>
          </div>
          <div className="two fields">
            <p className="field">
              <input
                ref="email"
                type="email"
                placeholder="Email Address"
                name="email"
                required
              />
            </p>
            <p className="field service-field">
              <input
                ref="service"
                type="text"
                placeholder="Which of our services are you interested in?"
                name="service"
              />
            </p>
          </div>
          <div className="two fields">
            <p className="field company-field">
              <input
                ref="company"
                type="text"
                placeholder="Company"
                name="company"
              />
            </p>
          </div>
          <p className="field">
            <label>
              <textarea
                ref="message"
                name="message"
                placeholder="How can we help you?"
              />
            </label>
          </p>
          <div className="field">
            <div className="ui checkbox">
              <input
                type="checkbox"
                tabIndex="0"
                name="mailinglist"
                ref="mailinglist"
                id="mailinglist"
                onClick={this.handleClick}
                defaultChecked={this.state.isChecked}
              />
              <label>Add me to the Ragnarok List to stay up to date!</label>
            </div>
          </div>
          <p>
            <button
              id="get_in_touch_btn"
              className="ui button"
              type="submit"
              onclick="return gtag_report_conversion('https://www.ragnaroknyc.com/')"
            >
              CONTACT US
            </button>
          </p>
          {this.state.feedbackMsg && (
            <Message positive header={this.state.feedbackMsg} />
          )}
        </form>
        <ReCaptcha
          ref={ref => (this.recaptcha = ref)}
          sitekey={`${process.env.GATSBY_NEW_GOOGLE_SITE_KEY}`}
          onResolved={this.onResolved}
        />
      </div>
    )
  }
}

export default Contact