import { useQuery, useMutation } from "react-apollo"
import { useFormHandler, TextInput } from "../form/forms"
import { CURRENT_USER, USER_EDIT } from "./graphql"
import { SyntheticEvent } from "react"

const initialData = {
  name: '',
  email: '',
  password: '',
  passwordAgain: ''
}


const UserEditForm = () => {

  const currentUser = useQuery(CURRENT_USER)
  const [updateUser, userEdit] = useMutation(USER_EDIT)
  const { inputProps } = useFormHandler(currentUser.data ? { ...initialData, ...currentUser.data.me } : initialData)

  return (
    <form onSubmit={(event: SyntheticEvent) => {
      event.preventDefault()
    }}>
      <TextInput label='Name' {...inputProps('name')} />
      <TextInput label='Email' {...inputProps('email')} />
      <TextInput label='Password' {...inputProps('password')} />
      <TextInput label='Repeat password' {...inputProps('passwordAgain')} />
      <button type='submit' disabled={userEdit.loading}>Update</button>
    </form>
  )
}

export default UserEditForm