"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, useRouter } from 'next/navigation';
import Background from "@/components/Utilities/Background";
import PageHeader from "@/sections/PageHeader";

const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL as string);

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: any) => {
    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>
  );
}
