import React, { Component } from "react";
import "./Form.css";
import { api } from "./api";

class Form extends Component {
  state = {
    name: "",
    email: "",
    number: "",
    optIn: true,
  };

  handleChange = (str) => {
    return e =>
      this.setState({ [str]: e.currentTarget.value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    api.addUser(this.state.name, this.state.email, this.state.number);
  };

  handlePromotionClick = () => {
    this.setState({ optIn: !this.state.optIn });
  };

  render() {
    return (
      // The data-testid attributes give us more security for tests, than those use for styling.
      <form data-testid="addUserForm" onSubmit={this.handleSubmit}>
        <h2>Request information</h2>
        <input type="text" name="name" data-testid="name"
          onChange={this.handleChange("name")}
          placeholder="Name"
          value={this.state.name} />
        <input type="text" name="email" data-testid="email"
          onChange={this.handleChange("email")}
          placeholder="Email"
          value={this.state.email} />
        <input type="text" name="number" data-testid="number"
          onChange={this.handleChange("number")}
          placeholder="Number"
          value={this.state.number} />

        <div className="form-item">
          <input type="checkbox" name="promo" id="promo" data-testid="checked"
            checked={this.state.optIn}
            onClick={this.handlePromotionClick}/>
          <label data-testid="promotionsP" className="promotions" htmlFor="promo">Receive promotions</label>
        </div>

        <button type="submit" data-testid="submitButton">Submit</button>
      </form>
    );
  }
}

export {
  Form
};