import { Formik, Form } from 'formik'
import { Mutation } from 'react-apollo'
import { adopt } from 'react-adopt'
import * as Yup from 'yup'

import { TextInput } from '../lib/forms'
import { CREATE_TRAINING } from '../lib/graphql'

const TrainingAdoption = adopt({
  training: ({ render }) => (<Mutation mutation={CREATE_TRAINING}>{render}</Mutation>),
  form: ({ render }) => (
    <Formik
      initialVariables={{
        title: '',
        trainingDate: ''
      }}
      validationSchema={{
        title: Yup.string(),
        trainingDate: Yup.date()
      }}
      onSubmit={ev => console.log(ev.target)}
    >
      {render}
    </Formik>)
})

const CreateTraining = props => (
  <TrainingAdoption>
    {({ training, form }) => (
      <Form>
        <h2>Create Training</h2>
        <TextInput
          label='title'
          name='title'
          type='text'
          placeholder='title'
        />
        <TextInput
          label='Training date'
          name='trainingDate'
          type='date'
        />
        <button type='submit'>Create!</button>
      </Form>
    )}
  </TrainingAdoption>
)

export default CreateTraining