import React, { useState } from "react";
import { Fade, Slide } from "react-reveal";
import $ from "jquery";
import { API_URL } from '../constants';

const Contact = (props) => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');
    const [loading, setLoading] = useState(false);
    const [successMsg, setSuccessMsg] = useState('');
    const [errorMsg, setErrorMsg] = useState('');

    const handleChange = e => {
      const { name, value } = e.target;
      switch (name) {
        case 'name':
          setName(value);
          break;
        case 'email':
          setEmail(value);
          break;
        case 'message':
          setMessage(value);
          break;
        default:
          break;
      }
    };

    const submitForm = () => {
      $.ajax({
        url: `${API_URL}/contact`,
        dataType: "json",
        method: 'POST',
        cache: false,
        data: { name, email, message, },
        success: function(data) {
          setLoading(false);
          setName('');
          setEmail('');
          setMessage('');
          setErrorMsg('');
          setSuccessMsg(data.message);
        },
        error: function(xhr, status, err) {
          var json = JSON.parse(xhr.responseText);
          setErrorMsg(json.error);
          setLoading(false);
        }
      });
    };

    const handleSubmit = e => {
      e.preventDefault();
      setLoading(true);
      submitForm();
    };

    if (!props.data) return null;

    const appName = props.data.name;
    const street = props.data.address.street;
    const city = props.data.address.city;
    const state = props.data.address.state;
    const zip = props.data.address.zip;
    const phone = props.data.phone;
    const contactMessage = props.data.contactmessage;

    return (
      <section id="contact">
        <Fade bottom duration={1000}>
          <div className="row section-head">
            <div className="two columns header-col">
              <h1>
                <span>Get In Touch.</span>
              </h1>
            </div>

            <div className="ten columns">
              <p className="lead">{contactMessage}</p>
            </div>
          </div>
        </Fade>

        <div className="row">
          <Slide left duration={1000}>
            <div className="eight columns">
              <form 
                method="post" 
                id="contactForm" 
                name="contactForm"
                onSubmit={handleSubmit}
              >
                <fieldset>
                  <div>
                    <label htmlFor="name">
                      Name <span className="required">*</span>
                    </label>
                    <input
                      type="text"
                      size="35"
                      id="name"
                      name="name"
                      value={name}
                      onChange={handleChange}
                    />
                  </div>

                  <div>
                    <label htmlFor="email">
                      Email <span className="required">*</span>
                    </label>
                    <input
                      type="text"
                      size="35"
                      id="email"
                      name="email"
                      value={email}
                      onChange={handleChange}
                    />
                  </div>

                  <div>
                    <label htmlFor="message">
                      Message <span className="required">*</span>
                    </label>
                    <textarea
                      cols="50"
                      rows="15"
                      id="message"
                      name="message"
                      value={message}
                      onChange={handleChange}
                    ></textarea>
                  </div>

                  <div>
                    <button className="submit">Submit</button>
                    {loading ? (
                      <span id="image-loader">
                        <img alt="" src="images/loader.gif" />
                      </span>
                    ) : null}
                  </div>
                </fieldset>
              </form>

              {errorMsg.length ? <div id="message-warning">{errorMsg}</div> : null}
              {successMsg.length ? (
                <div id="message-success">
                  <i className="fa fa-check"></i>Your message was sent, thank you!
                  <br />
                </div>
              ) : null}
              
            </div>
          </Slide>

          <Slide right duration={1000}>
            <aside className="four columns footer-widgets">
              <div className="widget widget_contact">
                <h4>Address and Phone</h4>
                <p className="address">
                  {appName}
                  <br />
                  {street} <br />
                  {city}, {state} {zip}
                  <br />
                  <span>{phone}</span>
                </p>
              </div>

              {/* <div className="widget widget_tweets">
                <h4 className="widget-title">Latest Tweets</h4>
                <ul id="twitter">
                  <li>
                    <span>
                      This is Photoshop's version of Lorem Ipsum. Proin gravida
                      nibh vel velit auctor aliquet. Aenean sollicitudin, lorem
                      quis bibendum auctor, nisi elit consequat ipsum
                      <a href="./">http://t.co/CGIrdxIlI3</a>
                    </span>
                    <b>
                      <a href="./">2 Days Ago</a>
                    </b>
                  </li>
                  <li>
                    <span>
                      Sed ut perspiciatis unde omnis iste natus error sit
                      voluptatem accusantium doloremque laudantium, totam rem
                      aperiam, eaque ipsa quae ab illo inventore veritatis et
                      quasi
                      <a href="./">http://t.co/CGIrdxIlI3</a>
                    </span>
                    <b>
                      <a href="./">3 Days Ago</a>
                    </b>
                  </li>
                </ul>
              </div> */}
            </aside>
          </Slide>
        </div>
      </section>
    );
};

export default Contact;
