import {Formik} from 'formik'

import React from 'react'
import {Router} from '../routes'
import Layout from '../components/MyLayout.js'

import TextFormGroup from '../components/TextFormGroup'
import FormGroup from '../components/FormGroup'

export default class Register extends React.Component {
  state = {
    email: '',
    username: '',
    password: '',
    bio: ''
  }

  onSubmit (data, { setSubmitting, setErrors }) {
    console.log('Welcome, ' + data.username + ' from ' + data.email + ' with pw ' + data.password)
    setTimeout(() => {
      setErrors({
        username: 'Username already taken'
      })
      setSubmitting(false)
    }, 250)
  }

  renderForm (opts) {
    const { name } = opts
    return (<form onSubmit={opts.handleSubmit}>
      {opts.isSubmitting ? <h1>LOAINDG</h1> : ''}
      <TextFormGroup name="email" formik={opts} />
      <TextFormGroup name="username" label="Your Username" placeholder="Pick a memorable name" formik={opts} />
      <FormGroup name="bio" formik={opts}>
        <textarea name="bio"
          customprop="This needs custom stuff"
          onChange={opts.handleChange}
          onBlur={opts.handleBlur}
          value={opts.values.bio}>
        </textarea>
      </FormGroup>
      <input
        type="password"
        name="password"
        onChange={opts.handleChange}
        onBlur={opts.handleBlur}
        value={opts.values.password}
      />
      {opts.errors.password && opts.touched.password && opts.errors.password}
      <button type="submit" disabled={opts.isSubmitting}>
        Submit
      </button>
    </form>)
  }

  render () {
    return (
      <Layout>
        <div>
          <Formik
            initialValues={this.state}
            onSubmit={this.onSubmit}
          >
            {this.renderForm}
          </Formik>
        </div>
      </Layout>
    )
  }
}