"use client"

import React from "react"
import { useForm } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"
import { changeEmailValidationSchema } from "@/utils/form"
import { toast } from "react-toastify"
import PocketBase from "pocketbase"
import PageWrapper from "@/components/Utilities/PageWrapper"
import { usePathname } from "next/navigation"
import Background from "@/components/Utilities/Background"
import PageHeader from "@/sections/PageHeader"

const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL)

export default function ConfirmEmailChangePage() {
  const pathName = usePathname()
  const token = pathName.split("/").at(-1)
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset
  } = useForm({
    resolver: yupResolver(changeEmailValidationSchema)
  })

  const onSubmit = async data => {
    try {
      await pb.collection("user").confirmEmailChange(token ?? "", data.password)
      reset()
      document.getElementById("sign-in-modal")?.click()
    } catch (error) {
      if (error instanceof Error) {
        toast.error("There was a problem. Please try change your email again", {
          position: "bottom-left",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "colored"
        })
      }
    }
  }

  return (
    <PageWrapper>
      <Background>
        <div className="h-screen w-screen flex items-center flex-col">
          <PageHeader
            title={"Enter Your Password To Change Your Email"}
            subtitle={<></>}
          />
          <form
            onSubmit={handleSubmit(onSubmit)}
            className="w-full max-w-xl px-4"
          >
            <div className="relative mt-6">
              <input
                type="password"
                className="py-3 px-4 block w-full bg-base-200 text-base-content border-primary/40 rounded-lg text-sm focus:border-secondary focus:ring-secondary disabled:opacity-50 disabled:pointer-events-none "
                placeholder="Password…"
                aria-label="Password…"
                autoComplete="on"
                {...register("password")}
              />
              <div className="text-start text-sm italic text-error-content">
                {errors.password?.message}&nbsp;
              </div>
            </div>
            <div className="flex flex-row w-full justify-between">
              <button
                disabled={isSubmitting}
                type="submit"
                className={isSubmitting ? "btn btn-gray" : "btn btn-primary"}
              >
                Change Email
                {isSubmitting && <div className="loading"></div>}
              </button>
            </div>
          </form>
        </div>
      </Background>
    </PageWrapper>
  )
}