import React from "react"
import { Layout } from "../../components/layout"
import { useMutation } from "urql"
import { navigate } from "gatsby"
import { SearchProvider } from "../../context/search-provider"

const customerRecover = `
  mutation customerRecover ($email: String!) {
  customerRecover(email: $email) {
    customerUserErrors {
      code
      field
      message
    }
  }
}
`

function ForgotPassword() {
  const [email, setEmail] = React.useState("")

  const [customerRecoverToken, getCustomerRecoverToken] =
    useMutation(customerRecover)

  const handleRecover = () => {
    let variables = {
      email: {
        email,
      },
    }
    if (email) {
      getCustomerRecoverToken(variables)
        .then(({ data: { customerRecover: result } }) => {
          // We get error responses from the API in the result
          if (result.customerUserErrors?.length) {
            throw new Error(result.customerUserErrors)
          }
          console.log(result)
          setTimeout(() => {
            navigate("/")
          }, 400)
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }

  return (
    <Layout>
      <div className="mt-1">
        <input
          id="email"
          name="email"
          type="email"
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          className="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-mainPink-400 focus:border-mainPink-400 sm:text-sm"
        />
      </div>
      <button
        onClick={handleRecover}
        className="flex justify-center w-full px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm bg-mainPink-400 hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mainPink-400"
      >
        Inloggen
      </button>
    </Layout>
  )
}

export default function ForgotPasswordTemplate(props) {
  return (
    <SearchProvider>
      <ForgotPassword {...props} />
    </SearchProvider>
  )
}