<template>
  <f7-app v-bind="f7params">
  <!-- Left panel with cover effect-->
  <f7-panel left cover>
    <f7-view>
      <f7-page>
        <f7-navbar title="ALVINN"></f7-navbar>
        <f7-list>
          <f7-list-item link="/settings/" view=".view-main" panel-close=".panel-left">Settings</f7-list-item>
          <f7-list-item link="/about/">About ALVINN</f7-list-item>
        </f7-list>
        <f7-toolbar class="panel-bar" position="bottom">
          <span>version 0.1.1</span>
        </f7-toolbar>
      </f7-page>
    </f7-view>
  </f7-panel>

  <!-- Your main view, should have "view-main" class -->
  <f7-view main class="safe-areas" url="/"></f7-view>

  </f7-app>
</template>

<style>
  .panel-bar > .toolbar-inner {
    justify-content: center;
  }
</style>

<script>
  import { ref, onMounted } from 'vue';
  import { f7, f7ready } from 'framework7-vue';
  import { getDevice }  from 'framework7/lite-bundle';
  import cordovaApp from '../js/cordova-app.js';

  import routes from '../js/routes.js';
  import store from '../js/store';

  export default {
    setup() {
      const device = getDevice();
      // Framework7 Parameters
      const f7params = {
        name: 'ALVINN', // App name
        theme: 'auto', // Automatic theme detection
        //autoDarkTheme: !(localStorage.getItem('openhab.ui:theme.dark')),
        darkMode: 'auto',
        colors: {
          primary: '#002f65',
        },

        // App store
        store: store,
        // App routes
        routes: routes,

        // Register service worker (only on production build)
        serviceWorker: process.env.NODE_ENV ==='production' ? {
          path: '/service-worker.js',
        } : {},

        // Input settings
        input: {
          scrollIntoViewOnFocus: device.cordova,
          scrollIntoViewCentered: device.cordova,
        },
        // Cordova Statusbar settings
        statusbar: {
          iosOverlaysWebView: true,
          androidOverlaysWebView: false,
        },
        // Navbar settings
        navbar: {
          mdCenterTitle: true,
          iosCenterTitle: true,
        },
        // Dialog settings
        dialog: {
          title: 'ALVINN'
        }
      };
      onMounted(() => {
        f7ready(() => {
          // Init cordova APIs (see cordova-app.js)
          if (device.cordova) {
            cordovaApp.init(f7);
          }

          // Call F7 APIs here
        });
      });

      return {
        f7params
      }
    }
  }
</script>