import React, { Component } from 'react';
import { Formik } from 'formik';
import Yup from 'yup';
import autobind from 'class-autobind';
import './App.css';

const Login = ({
  values,
  touched,
  errors,
  error,
  handleChange,
  handleSubmit,
  handleBlur,
  handleReset,
  isSubmitting
}) => (
  <form onSubmit={handleSubmit}>
    {error && <div className="callout alert">{error}</div> }
    <div className="grid-container" style={{ width: '50%', margin: '0 auto' }}>
      <div className="grid-x grid-margin-x">
        <div className="cell">
          <label>Username
            <input name="username" type="text" onChange={handleChange} value={values.username}/>
          </label>
          {errors.username && touched.username && <div className="callout alert">{errors.username}</div>}
          <label>Password
            <input type="password" name="password" onChange={handleChange} value={values.password}/>
          </label>
          {errors.password && touched.password && <div className="callout alert">{errors.password}</div>}
          <button className="button" type="submit" disabled={isSubmitting}>Submit</button>
        </div>
      </div>
    </div>
  </form>
);

// LoginForm = class LoginForm extends Component {...
const LoginForm = Formik({
  validationSchema: Yup.object().shape({
    username: Yup.string().email().required(),
    password: Yup.string().required(),
  }),

  mapPropsToValues: props => ({
    username: props.form.social.twitter,
    password: props.password || '',
  }),

  mapValuesToPayload: values => ({
    form: {
      social: {
        twitter: values.username,
      },
      password: values.password,
    }
  }),

  handleSubmit: (payload, { props, setError, setSubmitting }) => {
    setError('Server hates us!');
    setSubmitting(false)
    props.onSuccess(payload);
  },
})(Login);


class App extends Component {
  constructor(props) {
    super(props)
    autobind(this);
    this.state = {
    };
  }
  onSuccess(payload) {
    // this.setState({message: 'Succcess!'});
    console.log(payload);
  }
  render() {
    const form = {
      social: {
        twitter: 'stuff'
      }
    }
    return (
      <div className="App">
        {this.state.message && <div className="callout primary">{this.state.message}</div>}
        <LoginForm form={form} onSuccess={this.onSuccess}/>
      </div>
    );
  }
}

export default App;