<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-color: white;
      font-family: Roboto;
      font-size: 2em;
    }

    .highlight {
      background-color: gray;
    }
  </style>
</head>

<body>
  <div id="menu"></div>
  <script type="text/javascript">
    const watchdogFunctions = {
      register: 'Register',
      unregister: 'Unregister',
      ping: 'Ping',
      getWatchdogViolations: 'Get Watchdog Violations',
      getPersistentSettingWatchdogEnable: 'Get Enable Watchdog',
      setPersistentSettingWatchdogEnableTrue: 'Set Enable Watchdog True',
      setPersistentSettingWatchdogEnableFalse: 'Set Enable Watchdog False',
      getPersistentSettingWatchdogCrash: 'Get Can Trigger Crash',
      setPersistentSettingWatchdogCrashTrue: 'Set Can Trigger Crash True',
      setPersistentSettingWatchdogCrashFalse: 'Set Can Trigger Crash False',
    }

    window.onload = loadMenu();

    function loadMenu() {
      let menu = document.getElementById('menu');
      for (const key in watchdogFunctions) {
        let el = document.createElement('div');
        el.id = key;
        el.textContent = watchdogFunctions[key];
        menu.appendChild(el);
      }
      menu = document.getElementById('menu').children;

      let index = 0;

      document.addEventListener('keydown', navigateMenu);

      refreshMenuHighlights();

      function navigateMenu(e) {
        if ([37, 38, 32782, 32780].includes(e.keyCode)) { // left, up, android left, up
          index--;
        } else if ([39, 40, 32781, 32783].includes(e.keyCode)) { // right, down, android right, down
          index++;
        } else if ([13, 32768].includes(e.keyCode)) { // enter, android enter
          let watchdogFunction = menu[index].id;
          let ret = 'void';

          if (watchdogFunction == 'register') {
            ret = h5vcc.crashLog.register('test-name', 'test-description', 'started', 5000000, 0, 'none');
          } else if (watchdogFunction == 'unregister') {
            ret = h5vcc.crashLog.unregister('test-name');
          } else if (watchdogFunction == 'ping') {
            ret = h5vcc.crashLog.ping('test-name', `test-ping`);
          } else if (watchdogFunction == 'getWatchdogViolations') {
            ret = h5vcc.crashLog.getWatchdogViolations();
          } else if (watchdogFunction == 'getPersistentSettingWatchdogEnable') {
            ret = h5vcc.crashLog.getPersistentSettingWatchdogEnable();
          } else if (watchdogFunction == 'setPersistentSettingWatchdogEnableTrue') {
            h5vcc.crashLog.setPersistentSettingWatchdogEnable(true);
          } else if (watchdogFunction == 'setPersistentSettingWatchdogEnableFalse') {
            h5vcc.crashLog.setPersistentSettingWatchdogEnable(false);
          } else if (watchdogFunction == 'getPersistentSettingWatchdogCrash') {
            ret = h5vcc.crashLog.getPersistentSettingWatchdogCrash();
          } else if (watchdogFunction == 'setPersistentSettingWatchdogCrashTrue') {
            h5vcc.crashLog.setPersistentSettingWatchdogCrash(true);
          } else if (watchdogFunction == 'setPersistentSettingWatchdogCrashFalse') {
            h5vcc.crashLog.setPersistentSettingWatchdogCrash(false);
          }

          let el = document.getElementById(watchdogFunction);
          el.textContent = watchdogFunctions[watchdogFunction] + ' (' + ret + ')';
        }
        index = (index + menu.length) % menu.length;
        refreshMenuHighlights();
      }

      function refreshMenuHighlights() {
        for (let i = 0; i < menu.length; i++) {
          if (i == index) {
            menu[i].classList.add('highlight');
          } else {
            menu[i].classList.remove('highlight');
          }
        }
      }
    }
  </script>
</body>

</html>