import React, { Component } from 'react';

const encode = (data) => {
    return Object.keys(data)
        .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
        .join("&");
}

export default class Form extends Component {
    constructor(props) {
        super(props);
        this.state = { name: '', method: '', message: '' };
    }

    handleSubmit = e => {
        fetch('/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: encode({ 'form-name': 'contact-form', ...this.state })
        });
        
        e.preventDefault();
    }
    
    handleChange = e => this.setState({ [e.target.name]: e.target.value });

    render() {
        const { name, method, message } = this.state;
        return(
            <div className="container-fluid">
                <div className="row">
                    <div className="col-lg-8">
                        <form name="contact-form" id="contact-form" action="/contact" onSubmit={this.handleSubmit} netlify>
                            <ul>
                                <li className="wow fadeInUp" data-wow-delay="1.4s">
                                    <label htmlFor="name">Name:</label>
                                    <div className="textarea">
                                        <input type="text" name="name" id="name" defaultValue={name} onChange={this.handleChange} required />
                                    </div>
                                </li>
                                <li className="wow fadeInUp" data-wow-delay="1.6s">
                                    <label htmlFor="method">Email/ Discord:</label>
                                    <div className="textarea">
                                        <input type="text" name="method" id="method" defaultValue={method} onChange={this.handleChange} required />
                                    </div>
                                </li>
                                <li className="wow fadeInUp" data-wow-delay="1.6s">
                                    <label htmlFor="message">Message:</label>
                                    <div className="textarea">
                                        <input type="text" name="message" id="message" defaultValue={message} onChange={this.handleChange} required />
                                    </div>
                                </li>
                            </ul>
                            
                            <button type="submit" name="contact-form" id="contact-form" className="send wow fadeInUp">
                                Send Message
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}