import React, { Component } from "react";
import "../../App.js";

export class Invites extends Component {
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values, handleChange } = this.props;
    // ==========================================
    const addEmailForm = () => {
      return (
        <li>
          <input
            class="form-input"
            type="email"
            placeholder="nom@exemple.com"
            name="invites"
            defaultValue={values.invites}
            onChange={handleChange("invites")}
            required
          />
        </li>
      );
    };
    // ==========================================
    return (
      <div class="page">
        <h2 class="box-title">Qui sont les eleves de cette classe ?</h2>
        <p>Vous pourrez toujours en ajouter par la suite</p>
        <form onSubmit={this.continue}>
          <div class="content">
            <input
              class="form-input"
              type="email"
              placeholder="nom@exemple.com"
              name="invites"
              defaultValue={values.invites}
              onChange={handleChange("invites")}
              required
            />
            <input
              class="form-input"
              type="email"
              placeholder="nom@exemple.com"
              name="invites"
              defaultValue={values.invites}
              onChange={handleChange("invites")}
              required
            />
            <input
              class="form-input"
              type="email"
              placeholder="nom@exemple.com"
              name="invites"
              defaultValue={values.invites}
              onChange={handleChange("invites")}
              required
            />
            <div class="add-invite">
              <a href="#">
                <img class="text-icon" src={require("../../plusIcon.png")} />
                Ajouter une autre personne
              </a>
            </div>
          </div>

          <input
            type="submit"
            value="Ajouter des élèves"
            class="submit-button"
          />
        </form>
        <div class="link-invite">
          <ol>{addEmailForm}</ol>
          <a
            href="#"
            onClick={() => {
              this.addEmailForm();
            }}
          >
            <img class="text-icon" src={require("../../linkIcon.png")} />
            Obtenir un lien d’invitation à partager
          </a>
        </div>
      </div>
    );
  }
}

export default Invites;