<template>
  <q-layout view="hhh lpr fff">
    <q-header>
      <MenuBar @drawer="drawer = !drawer" />
    </q-header>
    <q-footer>
      <StatusBar />
    </q-footer>
    <!--
    <q-drawer
      v-model="drawer"
      :width="200"
      :breakpoint="500"
      overlay
      :class="$q.dark.isActive ? 'bg-grey-8' : 'bg-grey-3'"
    >
      <q-scroll-area class="fit">
        <q-list>
          <template v-for="(menuItem, index) in menuList" :key="index">
            <q-item
              clickable
              :active="menuItem.route === route.name"
              v-ripple
              @click="$router.push({ name: menuItem.route })"
            >
              <q-item-section avatar>
                <q-icon :name="menuItem.icon" />
              </q-item-section>
              <q-item-section>
                {{ menuItem.label }}
              </q-item-section>
            </q-item>
            <q-separator :key="'sep' + index" v-if="menuItem.separator" />
          </template>
        </q-list>
      </q-scroll-area>
    </q-drawer>
    -->
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { useSimulationStore } from 'stores/simulation';
import { useSocketStore } from 'stores/socket';
import { useIcloudStore } from 'stores/icloud';
import { useFavoriteStore } from 'stores/favorite';

import MenuBar from 'components/MenuBar.vue';
import StatusBar from 'components/StatusBar.vue';

const simulationStore = useSimulationStore();
const socketStore = useSocketStore();
const icloudStore = useIcloudStore();
const favoriteStore = useFavoriteStore();

const drawer = ref(false);

onMounted(() => {
  socketStore.bindEvents();
  simulationStore.bindEvents();
  icloudStore.bindEvents();
  socketStore.connect();
  favoriteStore.initialize();
});
</script>
