import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import MakeNewAppeal from "./myportal/makenewappeal";
import MyCases from "./myportal/mycases";
import SearchCases from "./myportal/searchcases";
import AwaitingSubmission from "./myportal/awaitingsubmission";
import MyRepresentations from "./myportal/myrepresentations";
import WatchedCases from "./myportal/watchedcases";
import YourAccount from "./myportal/youraccount";
import { parseCookies, setCookie, destroyCookie } from "nookies";
import Dns from "./myportal/dns";

import IdleTimer from "react-idle-timer";
import TimeoutModal from "./timeout/timeoutmodal";
import { useState } from "react";

import TimeOut from "../components/timeout";
import UploadFile from "./myportal/uploadFile";

const MyPortal = (props) => {
    const { showFileUpload } = 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(),
            router.replace(props.ggLogout);
    };

    return (
        <>
            <main className="" id="main-content" role="main">
                <div className="servicebanner myportal govuk-!-margin-bottom-4">
                    <h1>
                        <img
                            src={
                                router.locale == "cy"
                                    ? "/assets/images/planning-casework-cy.svg"
                                    : "/assets/images/planning-casework-en.svg"
                            }
                            alt={
                                router.locale == "cy"
                                    ? "Fy mhorth"
                                    : "My Portal"
                            }
                        />
                    </h1>

                    <div className="serviceBanner_userDetails">
                        <img
                            className="user_logo"
                            src="/assets/images/user.svg"
                            alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
                        />{" "}
                        <div className="serviceBanner_userDetails_name">
                            {props.accountDetails.accountDetails.firstname}{" "}
                            {props.accountDetails.accountDetails.lastname}
                        </div>
                        <div>
                            <Link
                                href={
                                    router.locale == "cy"
                                        ? "/allgofnodi"
                                        : "/logout"
                                }
                            >
                                <a
                                    onClick={() => {
                                        handleLogout();
                                    }}
                                    className="govuk-header__link govuk-!-margin-right-3"
                                >
                                    {t("common:signout-label")}
                                </a>
                            </Link>
                        </div>
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="flex-container grid-row govuk-body ">
                            <MakeNewAppeal />
                            <SearchCases />
                            <AwaitingSubmission
                                awaitingSubmission={props.awaitingSubmission}
                            />
                            <MyCases myCases={props.myCases} />
                            <WatchedCases watchedCases={props.watchedCases} />
                            <MyRepresentations
                                myRepresentations={props.myRepresentations}
                            />
                            <Dns />
                            <YourAccount />
                            {showFileUpload == "true" && <UploadFile />}
                        </div>
                    </div>
                </div>
            </main>
            {/* <IdleTimer
                ref={(ref) => {
                    idleTimer = ref;
                }}
                element={document}
                stopOnIdle={true}
                onActive={console.log(" bbis active", idleTimer)}
                onIdle={onIdle}
                timeout={1000 * inactiveTimeOut * 1}
            /> */}
            <TimeOut ggLogout={props.ggLogout} />
        </>
    );
};

export default MyPortal;