import { IonApp, setupIonicReact } from '@ionic/react';

import store from './store/index';
import { Provider } from 'react-redux';
import { Suspense } from 'react';
import { PouchDB } from 'react-pouchdb';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

import Map from './components/map/map';

setupIonicReact();

// 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 App: React.FC = () => {
  return (
    <IonApp>
      <Provider store={store}>
        <PouchDB name='dyomedea' auto_compaction={true} revs_limit={10}>
          <Suspense fallback='loading...'>
            <Map />
          </Suspense>
        </PouchDB>
      </Provider>
    </IonApp>
  );
};

export default App;