import { routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Form, Submit } from '@redwoodjs/forms'
import { toast } from '@redwoodjs/web/toast'

import InputTextForm from 'src/components/InputTextForm'
import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'

const UpdatePasswordPage = () => {
  const { client } = useAuth()
  const onSubmit = ({ password, confirm }) => {
    if (password !== confirm || !password) {
      toast.error("Passwords don't match, try again")
      return
    }
    client
      .currentUser()
      .update({ password })
      .then(() => {
        toast.success('Password updated')
        setTimeout(() => {
          navigate(routes.home())
        }, 500)
      })
      .catch(() => {
        toast.error('Problem updating password')
      })
  }
  return (
    <MainLayout>
      <Seo title="Update Password" description="Update Password" lang="en-US" />

      <section className="max-w-md mx-auto mt-20">
        <h2 className="text-xl text-ch-gray-300 pb-4">Reset Password</h2>
        <Form onSubmit={onSubmit}>
          <div
            className="grid items-center gap-2"
            style={{ gridTemplateColumns: 'auto 1fr' }}
          >
            <span className="capitalize text-ch-gray-300 text-sm">
              password
            </span>
            <InputTextForm
              className="text-xl"
              name="password"
              type="password"
              validation={{
                required: true,
              }}
            />
            <span className="capitalize text-ch-gray-300 text-sm">confirm</span>
            <InputTextForm
              className="text-xl"
              name="confirm"
              type="password"
              validation={{
                required: true,
              }}
            />
            <Submit className="col-start-2 mt-4 bg-ch-purple-400 bg-opacity-50 hover:bg-opacity-80 text-ch-gray-300 flex h-10 flex-shrink-0 justify-center items-center px-4 rounded">
              Update
            </Submit>
          </div>
        </Form>
      </section>
    </MainLayout>
  )
}

export default UpdatePasswordPage