import React, { Component } from "react";
import { Formik, Field, Form } from "formik";
import { Mutation } from "react-apollo";
import gql from "graphql-tag";
import * as Yup from "yup";
import Menu from "../Common/Menu/Menu";
import Footer from "../Common/Footer/Footer";
import styles from "./Register.module.scss";

const REGISTER_USER = gql`
  mutation register($name: String!, $password: String!, $email: String!) {
    register(name: $name, password: $password, email: $email) {
      status
      message
    }
  }
`;

const registerMutation = values => {
  <Mutation mutation={REGISTER_USER}>
    {({ loading, error, data }) => {
      if (loading) console.log(loading);
      if (error) console.log(error);
      if (data) console.log(data);
    }}
  </Mutation>;
};

const SignupSchema = Yup.object().shape({
  name: Yup.string()
    .min(2, "Too Short!")
    .max(15, "Too Long!")
    .required("This field is required"),
  password: Yup.string()
    .min(2, "Too Short!")
    .max(15, "Too Long!")
    .required("This field is required"),
  email: Yup.string()
    .email("Invalid email")
    .required("This field is required")
});

class Register extends Component {
  render() {
    return (
      <div>
        <Menu />
        <div className={styles.Content}>
          <h1>Register</h1>
          <Formik
            initialValues={{ email: "", name: "", password: "" }}
            validationSchema={SignupSchema}
            onSubmit={(values, actions) => {
              setTimeout(() => {
                alert(JSON.stringify(values, null, 2));
                registerMutation(values);
                actions.setSubmitting(false);
              }, 1000);
            }}
            render={({ errors, touched }) => (
              <Form>
                <Field type="text" name="name" placeholder="Name" />
                {errors.name && touched.name ? <div>{errors.name}</div> : null}
                <Field
                  type="email"
                  name="email"
                  placeholder="Enter a valid email "
                />
                {errors.email && touched.email ? (
                  <div>{errors.email}</div>
                ) : null}
                <Field
                  type="password"
                  name="password"
                  placeholder="Enter a password"
                />
                {errors.password && touched.password ? (
                  <div>{errors.password}</div>
                ) : null}
                <button type="submit">Submit</button>
              </Form>
            )}
          />
        </div>
        <Footer />
      </div>
    );
  }
}

export default Register;