<?xml version="1.0" encoding="UTF-8"?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui">


    <!-- http://murygin.wordpress.com/2012/11/29/jsf-primefaces-session-timeout-handling/ -->
    <h:form prependId="false">

        <p:remoteCommand name="logoutCommand" actionListener="#{logoutGui.doLogoutGuiRedirect}" async="false" immediate="true"/>

        <!-- ELECTMUC-989 Session.timeout - 3 Minuten vorher plus 30 Sekunden Puffer, wenn timeout über 6 Minuten-->
        <p:idleMonitor
                timeout="#{session.maxInactiveInterval * 1000 - (3*60*1000 + 30*1000)}"
                onidle="startIdleMonitor()"
                onactive="PF('timeoutDialog').hide()" rendered="#{session.maxInactiveInterval gt (6*60)}"/>

        <p:idleMonitor
                timeout="#{session.maxInactiveInterval * 1000 - (5000)}"
                onidle="logoutCommand();" rendered="#{session.maxInactiveInterval le (6*60)}"/>

        <p:dialog id="timeoutSession"
                header="#{msgs['session.expire']}"
                widgetVar="timeoutDialog"
                showEffect="fade" hideEffect="fade"
                modal="true"
                width="400"
                height="150"
                closable="false"
                draggable="false"
                resizable="false"
                appendTo="@(body)"
                onHide="stopCount()"
                onShow="doTimer()">
            <br/>
            <p:panel>
                <span class="#{icons.iconAlert}"/>
                #{msgs['logoff.soon.1']}
                <span id="dialog-countdown" class="font-weight-bold"></span>
            </p:panel>
            <br/>
            <p class="font-weight-bold">#{msgs['move.cursor']}</p>
        </p:dialog>
        <p:remoteCommand name="keepAlive" actionListener="#{principal.keepAlive}" immediate="true"/>
        <p:remoteCommand name="logoutCommand" actionListener="#{logoutGui.doLogoutGuiRedirect}" async="false" immediate="true"/>
        <script type="text/javascript">
          const TIME = 2 * 60; //  Sekunden im Dialog bis redirect
          let countTimer = TIME;
          let processTimer;
          let timer_is_on = 0;
          const redirectPage = "#{request.contextPath}/login.xhtml";

          const countDownDiv = "dialog-countdown";
          let txtCountDown = document.getElementById(countDownDiv);

          function startIdleMonitor() {
            countTimer = TIME;
            txtCountDown.innerHTML = countTimer;
            PF('timeoutDialog').show();
          }

          function timedCount() {
            txtCountDown.innerHTML = countTimer;
            if (countTimer === 0) {
              clearTimeout(processTimer);
              timer_is_on = 0;

              logoutCommand();
              // window.location.href = redirectPage;
              return;
            }
            countTimer = countTimer - 1;
            processTimer = setTimeout(timedCount, 1000);
          }

          function doTimer() {
            if (!timer_is_on) {
              timer_is_on = 1;
              timedCount();
            }
          }

          function stopCount() {
            clearTimeout(processTimer);
            timer_is_on = 0;
            keepAlive();
          }
        </script>

    </h:form>

</ui:composition>