import React from 'react';
import styled from 'styled-components';

const InputGroup = styled.p`
  margin: 0 0 1em 0;
  position: relative;
`;

const Label = styled.label`
  display: inline-block;
  position: absolute;
  top: -16px;
  left: 8px;
  color: #666;
  background-color: white;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 400;
`;

const Input = styled.input`
  margin: 0;
  width: 100%;
  padding: 0.8em 0.5em;
  background: transparent;
  border: solid 1px #999;
  outline: none;
`;

const TextArea = Input.withComponent('textarea').extend`
resize: none;
height: 10em;
`;

const Submit = styled.button`
  display: block;
  width: 100%;
  padding: 0.3em 0;
  cursor: pointer;
  background: rgba(148, 186, 101, 0.7);
  box-shadow: 0 3px 0 0 rgba(123, 163, 73, 0.7);
  border-radius: 2px;
  border: none;
  color: white;
  font-size: 1.6em;
  line-height: 1.2em;
`;

class ContactForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: '', email: '', phone: '', message: '' };
  }

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

  handleSubmit = e => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: this.encode({ 'form-name': 'content', ...this.state })
    })
      .then(() => {
        alert('Success!');
        this.setState({ name: '', email: '', phone: '', message: '' });
      })
      .catch(error => console.log(error));
    e.preventDefault();
  };

  handleChange = e => this.setState({ [e.target.name]: e.target.value });

  render() {
    const { name, email, phone, message } = this.state;

    return (
      <form onSubmit={this.handleSubmit} data-netlify="true">
        <InputGroup>
          <Label for="name">Name</Label>
          <Input type="text" name="name" value={name} onChange={this.handleChange} />
        </InputGroup>
        <InputGroup>
          <Label for="name">Email</Label>
          <Input type="email" name="email" value={email} onChange={this.handleChange} />
        </InputGroup>
        <InputGroup>
          <Label for="phone">Phone Number</Label>
          <Input type="tel" name="phone" value={phone} onChange={this.handleChange} />
        </InputGroup>
        <InputGroup>
          <Label for="name">Message</Label>
          <TextArea name="message" value={message} onChange={this.handleChange} />
        </InputGroup>
        <Submit type="submit">Send</Submit>
      </form>
    );
  }
}

export default ContactForm;