import React, { useEffect } from "react";
import { useAuth } from "../contexts/auth";
import { useRouter } from "next/router";
import useShowToast from "../hooks/useShowToast";

interface Auth {
  logout: () => Promise<boolean>;
}

const LogoutPage: React.FC = () => {
  const { logout } = useAuth() as Auth;
  const router = useRouter();
  const hasLoggedOut = React.useRef(false);
  const hasShownToast = React.useRef(false);
  const showToast = useShowToast;

  useEffect(() => {
    if (hasLoggedOut.current) return;
    hasLoggedOut.current = true;
    const handleLogout = async () => {
      await logout();
      router.replace("/login");
    };
    handleLogout();
  }, [logout, router]);

  useEffect(() => {
    if (hasShownToast.current) return;
    hasShownToast.current = true;
    showToast({
      message: "Your Session has expired.",
      position: "top-right",
      autoClose: 3000,
      forAutoRefresh: true,
    });
  }, [showToast]);

  return (
    <div className="w-full h-100vh d-flex justify-content-center align-items-center">
      <div className="d-flex justify-content-center align-items-center flex-column">
        <div className="d-flex align-items-center justify-content-center">
          <h6 className="me-3">Logging out. Please wait...</h6>
        </div>
      </div>
    </div>
  );
};

export default LogoutPage;