/* 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 { useState, type FC } from "react";

const ForgotPassword: FC = () => {
  const [email, setEmail] = useState("");
  const [findEmail, setFindEmail] = useState<boolean | undefined>(undefined);
  const [message, setMessage] = useState(
    "Don't fret! Just type in your email and we will send you a E-mail link to reset your pasword!"
  );

  const url = `${process.env.NEXT_PUBLIC_API}/api/v1/auth/forgot-password`;
  const {
    mutate: submit,
    isPending,
    isError,
    isSuccess,
    error,
  } = useMutation({
    mutationFn: async () => await axios.post(url, { email: email }),
    onSuccess: (data: any) => {
      setMessage(data?.data?.data);
      setFindEmail(true);
    },
  });

  return (
    <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>
        <p
          className={`mb-3 text-gray-500 dark:text-gray-300 ${
            findEmail === false ? "text-red-500" : ""
          } ${findEmail === true ? "text-green-500" : ""}`}
        >
          {message}
        </p>
        <form>
          <div className="mb-6 flex flex-col gap-y-3">
            <Label htmlFor="email">Your email</Label>
            <TextInput
              id="email"
              name="email"
              placeholder="name@company.com"
              type="email"
              required
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div>
            <Button
              onClick={() => submit()}
              className="w-full lg:w-auto"
              color="blue"
            >
              {isPending && <Spinner size="sm" className="mr-1" />}
              Reset password
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
};

export default ForgotPassword;