<template>
  <main>
    <!-- The client only is used to show the loading picture (@see https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component) -->
    <client-only placeholder=" " />

    <v-app dark>
      <LayoutMenu v-if="displayedMenu" :menu="menu" :mini-variant="properties.miniVariant" :openMenu="properties.openMenu" />

      <LayoutHeader @handle-open-menu-click="handleOpenMenu" @handle-open-mini-menu-click="handleOpenMiniMenu" />

      <v-main class="ot_content_color">
        <LayoutSubheader />

        <LayoutAlertbar class="mt-1"></LayoutAlertbar>

        <!-- Page will be rendered here-->
        <nuxt />
      </v-main>

      <lazy-LayoutAlertContainer />
    </v-app>
  </main>
</template>

<script lang="ts">
import { computed, ComputedRef, defineComponent, reactive, useContext } from '@nuxtjs/composition-api'
import { $useMenu } from '@/composables/layout/menu'

export default defineComponent({
  name: 'DefaultLayout',

  middleware: ['auth'],
  setup () {
    const { store } = useContext()
    const menu = $useMenu.setupContext().useLateralMenuConstruct()

    const properties = reactive({
      clipped: false,
      miniVariant: false,
      openMenu: false
    })

    const displayedMenu: ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu)

    const handleOpenMenu = (openMenu: boolean) => {
      properties.openMenu = openMenu
    }

    const handleOpenMiniMenu = (miniVariant: boolean) => {
      properties.miniVariant = miniVariant
    }

    return {
      properties,
      menu,
      displayedMenu,
      handleOpenMenu,
      handleOpenMiniMenu
    }
  }
})
</script>

<style scoped>
  .client-only-placeholder {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
    background-color: #2c3a48;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,[encoded data, 6188 characters]");
  }
</style>
