import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useState, useEffect } from "react";
import { useIdleTimer } from "react-idle-timer";
import TimeoutModal from "./timeoutmodal";
import { performPortalSignOut } from "../../lib/auth/sessionClient";

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

    const router = useRouter();
    const { locale } = router;
    const timeout = 1260_000;
    const promptBeforeIdle = 60_000;

    const [state, setState] = useState("Active");
    const [remaining, setRemaining] = useState(timeout);
    const [open, setOpen] = useState(false);

    const onIdle = () => {
        setState("Idle");
        performPortalSignOut(locale);
        setOpen(false);
    };

    const onActive = () => {
        setState("Active");
        setOpen(false);
    };

    const onPrompt = () => {
        setState("Prompted");
        setOpen(true);
    };

    const { getRemainingTime, activate } = useIdleTimer({
        onIdle,
        onActive,
        onPrompt,
        timeout,
        promptBeforeIdle,
        throttle: 500
    });

    useEffect(() => {
        const interval = setInterval(() => {
            setRemaining(Math.ceil(getRemainingTime() / 1000));
        }, 500);

        return () => {
            clearInterval(interval);
        };
    });

    const handleStillHere = () => {
        activate();
    };

    const timeTillPrompt = Math.max(remaining - promptBeforeIdle / 1000, 0);
    const seconds = timeTillPrompt > 1 ? "seconds" : "second";
    const minutes = timeTillPrompt / 60 > 1 ? "minutes" : "minute";

    return (
        <>
            {/* <h1>React Idle Timer</h1>
            <h2>Confirm Prompt</h2>
            <br />
            <p>Current State: {state}</p>
            {timeTillPrompt > 0 && (
                <>
                    <p>
                        {timeTillPrompt} {seconds} until prompt
                    </p>
                    <p>
                        {timeTillPrompt / 60} {minutes} until prompt
                    </p>
                </>
            )} */}

            <div
                className={open ? "modal fade show" : "modal fade"}
                style={{
                    display: open ? "flex" : "none"
                }}
            >
                <div className="modal-dialog">
                    <div className="modal-content">
                        <h3>
                            {t("common:login-modal-message", {
                                remaining: remaining
                            })}
                        </h3>
                        <button
                            className="govuk-button"
                            onClick={handleStillHere}
                        >
                            {t("common:login-modal-button")}
                        </button>
                    </div>
                </div>
                <div className="modal-backdrop fade show"></div>
            </div>
        </>
    );
};

export default TimeOut;