/* @refresh reload */
import { render } from 'solid-js/web';
import { Router, hashIntegration } from '@solidjs/router';
import {
  I18nContext,
  createI18nContext,
  useI18n,
} from '@solid-primitives/i18n';
import dict from './i18n';

import App from './App';
import { Language } from '@suid/icons-material';

// See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator
const requestWakeLock = async () => {
  const anyNav: any = navigator;
  if ('wakeLock' in navigator) {
    try {
      const wakeLock = await anyNav['wakeLock'].request('screen');
    } catch (err: any) {
      // The wake lock request fails - usually system-related, such as low battery.
      console.log(`Wake lock request failed: ${err.name}, ${err.message}`);
    }
  } else {
    console.log('No wake lock support here...');
  }
};

const handleVisibilityChange = () => {
  if (document.hidden) {
    console.log('Application hidden');
  } else {
    console.log('Application visible');
    requestWakeLock();
  }
};

// See https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
document.addEventListener('visibilitychange', handleVisibilityChange, false);
requestWakeLock();

const getLanguage = () => {
  for (const i in navigator.languages) {
    const language = navigator.languages[i];
    if (language in dict) {
      return language;
    }
    const shortLanguage = language.slice(0, 2);
    if (shortLanguage in dict) {
      return shortLanguage;
    }
  }
  return undefined;
};

const i18nDict = createI18nContext(dict, getLanguage());

render(
  () => (
    <Router>
      <I18nContext.Provider value={i18nDict}>
        <App />
      </I18nContext.Provider>
    </Router>
  ),
  document.getElementById('root') as HTMLElement
);