import React from 'react'
import { withProps } from 'recompose'
import { Formik, Field, Form } from 'formik'
import Button from '@material-ui/core/Button'
import { Search as SearchIcon } from '@material-ui/icons'
import IconButton from '@material-ui/core/IconButton'
import { TextField } from 'formik-material-ui'

let isSubmitting = true
const InputField = () => {
  return (
    <div>
      <Formik
        initialValues={{ username: '', password: '' }}
        onSubmit={values => {
          setTimeout(() => {
            isSubmitting = false
            alert(JSON.stringify(values, null, 2))
          }, 500)
        }}
        render={({ submitForm, isSubmitting, values, setFieldValue }) => (
          <div>
            <Form>
              <div>
                <Field
                  type="password"
                  label="Password"
                  name="password"
                  component={TextField}
                />
                <IconButton color="primary" aria-label="Search">
                  <SearchIcon />
                </IconButton>
                <Field
                  type="text"
                  label="User "
                  name="username"
                  component={TextField}
                />
                <IconButton color="primary" aria-label="Search">
                  <SearchIcon />
                </IconButton>
              </div>

              <Button
                variant="raised"
                color="primary"
                disabled={isSubmitting}
                onClick={submitForm}>
                Submit
              </Button>
            </Form>
          </div>
        )}
      />
    </div>
  )
}
export default withProps({})(InputField)