import { useState } from 'react'
import { createUser } from 'src/services/data-service'
import { useMutation } from '@tanstack/react-query'
import { signIn } from 'next-auth/react'
import { useRouter } from 'next/router'

const Test = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const router = useRouter()

  const createUserMutation = useMutation({
    mutationFn: createUser,
    mutationKey: createUser.queryKey,
    onSuccess: async () => {
      await signIn('credentials', { email, password })
      await router.push('/gender') // TODO: Implement this screen
    },
  })

  const onSubmit = () => {
    createUserMutation.mutate({ email, password })
  }

  return (
    <form onSubmit={onSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input value={password} onChange={(e) => setPassword(e.target.value)} />
      <button>Submit</button>
    </form>
  )
}

export default Test