import { useEffect } from "react";
import toast from "react-hot-toast";
import { useNavigate, useParams } from "react-router-dom";

import { useSendLoginMagicLinkMutation } from "@/app/services/auth";
import SentTip from "./SentTip";
import SelectLanguage from "../../components/Language";

export default function SendMagicLinkPage() {
  const { email = "" } = useParams();
  const [sendMagicLink, { isSuccess, isLoading, error }] = useSendLoginMagicLinkMutation();
  const navigateTo = useNavigate();
  useEffect(() => {
    if (email) {
      sendMagicLink(email);
    }
  }, [email]);

  useEffect(() => {
    if (isSuccess) {
      toast.success("Send Email Successfully!");
    }
  }, [isSuccess]);

  useEffect(() => {
    if (error && "status" in error) {
      switch (error.status) {
        case "PARSING_ERROR":
          toast.error(error.data);
          break;
        case 401:
          toast.error("Username or Password Incorrect");
          break;
        case 404:
          toast.error("Account not exist");
          break;
        default:
          toast.error("Something Error");
          break;
      }
      return;
    }
  }, [error]);

  const handlePwdPath = () => {
    navigateTo("/login");
  };

  return (
    <>
      <SelectLanguage />
      <div className="flex-center h-screen dark:bg-gray-800">
        <div className="py-8 px-10 shadow-md rounded-xl bg-white dark:bg-gray-700">
          {isSuccess ? (
            <SentTip email={email} handleBack={handlePwdPath} />
          ) : isLoading ? (
            <div className="">Sending...</div>
          ) : null}
        </div>
      </div>
    </>
  );
}
