import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { destroyCookie } from "nookies";
import { useState } from "react";
import IdleTimer from "react-idle-timer";
import TimeoutModal from "./timeoutmodal";
import { useSession, signIn, signOut } from "next-auth/react";

const TimeOut = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const [showModal, setShowModal] = useState(false);
    const inactiveTimeOut = 1200; // in seconds
    const reminderTimeout = 60; // in seconds

    let idleTimer = null;
    let logoutTimer = null;

    let onIdle = () => {
        togglePopup();
        logoutTimer = setTimeout(() => {
            handleLogout();
        }, 1000 * reminderTimeout * 1);
    };

    let togglePopup = () => {
        showModal == true ? setShowModal(false) : setShowModal(true);
    };

    let handleStayLoggedIn = () => {
        if (logoutTimer) {
            clearTimeout(logoutTimer);
            logoutTimer = null;
        }
        idleTimer.reset();
        togglePopup();
    };

    const handleLogout = () => {
        console.log("////////////", "\n", "logout", "\n", "//////////");
        destroyCookie({}, "pinsUser"),
            window.localStorage.clear(),
            signOut({ callbackUrl: "/logout" });
    };

    return (
        <>
            <IdleTimer
                ref={(ref) => {
                    idleTimer = ref;
                }}
                element={document}
                stopOnIdle={true}
                //onActive={console.log(" bbis active", idleTimer)}
                onIdle={onIdle}
                timeout={1000 * inactiveTimeOut * 1}
            />
            <TimeoutModal
                remainingCountdown={reminderTimeout}
                showModal={showModal}
                togglePopup={togglePopup}
                handleStayLoggedIn={handleStayLoggedIn}
            />
        </>
    );
};

export default TimeOut;