import React, { PureComponent } from "react";
import "animate.css/animate.min.css";
import ScrollAnimation from "react-animate-on-scroll";

class Form extends PureComponent {
  state = { error: false };
  input = ({ target: { value, name } }) => this.setState({ [name]: value });
  submitData = async () => {
    if (!this.handleValidation())return
    let body = this.state;
    body = JSON.stringify({ ...this.state, platform: "SPOT" });
    console.log(body)
    const data = await fetch("/working", {
      method: "POST",
      headers: {
        "Content-type": "application/json"
      },
      body
    });
    const json = await data.text();
    console.log(json);
    this.setState({done:true})
  };

  handleValidation() {
    let fields = this.state;
    let formIsValid = true;

    //Name
    if (!fields["name"]) {
      formIsValid = false;
    }

    if (typeof fields["name"] !== "undefined") {
      if (!fields["name"].match(/^[a-zA-Z]+$/)) {
        formIsValid = false;
      }
    }


    //Email
    if (!fields["email"]) {
      formIsValid = false;
    }

    if (typeof fields["email"] !== "undefined") {
      let lastAtPos = fields["email"].lastIndexOf("@");
      let lastDotPos = fields["email"].lastIndexOf(".");

      if (
        !(
          lastAtPos < lastDotPos &&
          lastAtPos > 0 &&
          fields["email"].indexOf("@@") == -1 &&
          lastDotPos > 2 &&
          fields["email"].length - lastDotPos > 2
        )
      ) {
        formIsValid = false;
      }
    }

    this.setState({ error: !formIsValid });
    return formIsValid;
  }



  render() {
    return (
      <div className="div-block-24">
        <div className="div-block-26">
          <div className="div-block-30">
            <ScrollAnimation
              animateIn="fadeInUp"
              duration={1.5}
              animateOnce="true"
            >
              <p className="paragraph-12 responseT">
                We want to be in touch with you
              </p>
            </ScrollAnimation>
            <ScrollAnimation
              delay="1500"
              animateIn="fadeIn "
              duration={1.5}
              animateOnce="true"
            >
              <p className="paragraph-13">
                Do you have questions? Write us a message or schedule a meeting
                with us, we are waiting for you
              </p>
            </ScrollAnimation>
          </div>
        </div>

        <div className="div-block-27">
          <ScrollAnimation
            delay="1000"
            animateIn="fadeInUp"
            duration={1.5}
            animateOnce="true"
            width="100"
            className="div-block-28"
          >
            <div class="">
              <div className="div-block-29">
                <div id="form" className="topBefore">
                  <div className="form white">
                    <input
                      id="name"
                      name="name"
                      type="text"
                      value={this.state.name}
                      onChange={this.input}
                      placeholder="Your name"
                      className="mg-input"
                      requiered
                    />
                    <input
                      id="email"
                      name="email"
                      className=""
                      value={this.state.email}
                      onChange={this.input}
                      type="text"
                      placeholder="Email"
                      requiered
                    />
                  </div>
                  <textarea
                    placeholder="Message"
                    className="Titillium"
                    name="message"
                    value={this.state.message}
                    onChange={this.input}
                  />
                  <br />
                  <div className="btndiv">
                    <button className="btn-2 _2 btn4" onClick={this.submitData}>
                      CONTACT US
                    </button>
                  </div>
                </div>
                {this.state.done && (
                    <div class="w-form-done" id="mensajecorreo">
                      <div>Thank you! Your submission has been received!</div>
                    </div>
                  )}
                  {this.state.error && (
                    <div class="w-form-fail" id="mensajeerror">
                      <div>
                        Oops! Something went wrong while submitting the form.
                      </div>
                    </div>
                  )}
              </div>
            </div>
          </ScrollAnimation>
        </div>
      </div>
    );
  }
}

export default Form;