<script setup>
import { ref } from "vue";
import { useLight, watch } from "#imports";
import { useQuasar } from "quasar";
import { q } from "#imports";
import { useRoute } from "vue-router";
defineProps({
  userMenuItems: {
    type: Array,
    default: () => []
  },
  headerButtons: {
    type: Array,
    default: () => []
  }
});
const route = useRoute();
const light = useLight();
const quasar = useQuasar();
light.setCurrentRoute(route);
watch(route, (to, from) => {
  light.setCurrentRoute(to);
});
const app = ref(null);
try {
  app.value = (await q({
    app: {
      version: true,
      company: true,
      companyLogo: true,
      logged: true,
      twoFactorAuthentication: true,
      forgetPasswordEnabled: true,
      googleClientId: true,
      microsoftClientId: true,
      microsoftTenantId: true,
      passwordBasedEnabled: true,
      webAuthnEnabled: true,
      facebookAppId: true
    }
  })).app;
  light.company = app.value.company;
  light.companyLogo = app.value.companyLogo;
} catch (e) {
  quasar.dialog({
    title: "Error",
    message: e.message,
    ok: "Reload"
  }).onOk(() => {
    window.location.reload();
  });
}
const compatible_version = "1.26.0";
if (app.value.version != "dev") {
  if (app.value.version <= compatible_version) {
    quasar.dialog({
      title: "Error",
      message: `This app is not compatible with this version of the server. Please update the light api to version ${compatible_version} or higher.`,
      ok: "Reload"
    }).onOk(() => {
      window.location.reload();
    });
  }
}
if (app.value.facebookAppId) {
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  })(document, "script", "facebook-jssdk");
  window.fbAsyncInit = function() {
    FB.init({
      appId: app.value.facebookAppId,
      xfbml: true,
      version: "v21.0"
    });
  };
}
</script>

<template>
    <q-layout v-if="!app.logged">
        <q-page-container class="bg-grey-2" style="color:#1f1f1f">
            <q-page padding>
                <div id="fb-root"></div>
                <l-login v-bind="app" @login="app.logged = true"></l-login>
            </q-page>
        </q-page-container>
    </q-layout>

    <l-app-main v-else @logout="app.logged = false" v-bind="app" :user-menu-items="userMenuItems"
        :header-buttons="headerButtons">
        <template #header>
            <slot name="header"></slot>
        </template>

        <template #user-menu>
            <slot name="user-menu"></slot>
        </template>

        <template v-for="button in headerButtons" :key="button.name" #[`header-button-menu-${button.name}`]>
            <slot :name="`header-button-menu-${button.name}`"></slot>
        </template>

        <template #page-top>
            <slot name="page-top"></slot>
        </template>

        <template #page-bottom>
            <slot name="page-bottom"></slot>
        </template>

    </l-app-main>
</template>
