import Layout from "../components/Layout";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {  useSupabaseClient } from "@supabase/auth-helpers-react";

import { SubmitHandler, useForm } from "react-hook-form";
const formSchema = z.object({
  password1: z.string().min(4, { message: "Passord må være over 4 tegn" }),
  password2: z.string().min(4, { message: "Passord må være over 4 tegn" }),
});
type FormValues = z.infer<typeof formSchema>;

const ResetPassword = () => {

  const supabase = useSupabaseClient();
  const supaResett: SubmitHandler<FormValues> = async ({
    password1,
    password2}, e?: React.BaseSyntheticEvent ) => {
      e?.preventDefault();
    if (password1 !== password2) {
      console.log("Passwords are not alike");
      return;
    }
    const { data, error } = await supabase.auth.updateUser({
      password: password1,
    });

    if (data) console.log("Update successfull, data is  ", data);
    if (error) console.log("There was en error ", error);
  };

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
  });
  return (
    <Layout>
      <p>Test</p>
      <form onSubmit={void handleSubmit(supaResett)}>
        <label htmlFor="password1">Password</label>
        <div aria-live="assertive">
          {errors?.password1?.message && <p>Feilmelding her </p>}
        </div>
        <input
          type="text"
          autoComplete="false"
          id="password1"
          {...register("password1")}
        />
        <label htmlFor="password2">Password</label>
        <div aria-live="assertive">
          {errors?.password1?.message && <p>Feilmelding her </p>}
        </div>
        <input
          type="text"
          autoComplete="false"
          id="password2"
          {...register("password2")}
        />
        <button type="submit" className="rounded bg-purple-500 px-4 py-2">
          Resett passord
        </button>
      </form>
    </Layout>
  );
};
export default ResetPassword;