/* eslint-disable jsx-a11y/anchor-is-valid */
"use client";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { Button, Card, Label, Spinner, TextInput } from "flowbite-react";
import { useRouter, useSearchParams } from "next/navigation";
import { useState, type FC } from "react";
import Toasts from "../Toasts";

const ResetPassword: FC = () => {
  const [password, setPassword] = useState("");
  const query = useSearchParams();
  const [confirm, setConfirm] = useState("");
  const [token, setToken] = useState(query.get("token"));
  const route = useRouter();

  const url = `${process.env.NEXT_PUBLIC_API}/api/v1/auth/reset-password`;

  const data = { token: token, password: password };

  const {
    mutate: submit,
    isPending,
    isError,
  } = useMutation({
    mutationFn: async () => await axios.post(url, data),
    onSuccess: (data: any) => {
      route.push("/sign-in");
    },
  });

  return (
    <>
      {isError && <Toasts type="error" message="Invalid token! try again" />}
      <div className="flex flex-col items-center justify-center px-6 lg:h-screen lg:gap-y-12">
        <a href="/" className="my-6 flex items-center gap-x-1 lg:my-0">
          <img alt="logo" src="/static/images/logo.png" className="mr-3 h-10" />
        </a>
        <Card className="w-full lg:max-w-[640px] lg:[&>*]:w-full lg:[&>*]:p-16">
          <h1 className="text-2xl font-bold dark:text-white md:text-3xl">
            Forgot your password?
          </h1>
          <form>
            <div className="mb-6 flex flex-col gap-y-3">
              <Label htmlFor="password">Password</Label>
              <TextInput
                id="password"
                name="email"
                type="password"
                required
                onChange={(e) => setPassword(e.target.value)}
              />
              <Label htmlFor="confirm">Confirm Password</Label>
              <TextInput
                id="confirm"
                name="confirm"
                type="password"
                required
                onChange={(e) => setConfirm(e.target.value)}
                helperText={
                  password !== confirm && (
                    <>
                      <span className="text-red-500">
                        Confirm password not match!
                      </span>
                    </>
                  )
                }
              />
            </div>
            <div>
              <Button
                onClick={() => submit()}
                className="w-full lg:w-auto"
                color="blue"
              >
                {isPending && <Spinner size="sm" className="mr-1" />}
                Update password
              </Button>
            </div>
          </form>
        </Card>
      </div>
    </>
  );
};

export default ResetPassword;