<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
        <q-toolbar-title>
          {{ productName }}
          <q-badge align="top" outline>V{{ version }}</q-badge>
        </q-toolbar-title>
        <domain-selector></domain-selector>
        <user-info-button />
      </q-toolbar>
    </q-header>

    <q-drawer :model-value="authStore.LeftDrawer" :show-if-above="false" bordered>
      <q-list>
        <q-item-label header>
          メニュー
        </q-item-label>

        <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />

      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, getCurrentInstance } from 'vue';
import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
import DomainSelector from 'components/DomainSelector.vue';
import UserInfoButton from 'components/UserInfoButton.vue';
import { useAuthStore } from 'stores/useAuthStore';
import { useRoute } from 'vue-router';
import { MenuMapping } from 'src/boot/permissions';

const authStore = useAuthStore();
const route = useRoute()
const noDomain = computed(() => !authStore.hasDomain);

const essentialLinks: EssentialLinkProps[] = reactive([
  {
    title: 'ホーム',
    caption: '設計書から導入する',
    icon: 'home',
    link: '/',
    target: '_self',
    disable: noDomain,
    permission: MenuMapping.home
  },
  // {
  //   title: 'フローエディター',
  //   caption: 'イベントを設定する',
  //   icon: 'account_tree',
  //   link: '/#/FlowChart',
  //   target: '_self'
  // },
  {
    title: 'アプリ',
    caption: 'アプリのカスタマイズ',
    icon: 'widgets',
    link: '/#/app',
    target: '_self',
    disable: noDomain,
    permission: MenuMapping.app
  },
  // {
  //   title: '条件エディター',
  //   caption: 'condition',
  //   icon: 'tune',
  //   link: '/#/condition',
  //   target:'_self'
  // },
  {
    title: '',
    isSeparator: true
  },
  // ------------ユーザー-------------
  {
    title: 'ユーザー管理',
    caption: 'ユーザーを管理する',
    icon: 'manage_accounts',
    link: '/#/user',
    target: '_self',
    permission: MenuMapping.user
  },
  {
    title: 'ロールの割り当て',
    caption: 'ロールを管理する',
    icon: 'work',
    link: '/#/role',
    target: '_self',
    permission: MenuMapping.role
  },
  // ------------接続先管理-------------
  {
    title: '接続先管理',
    caption: 'kintoneの接続先設定',
    icon: 'domain',
    link: '/#/domain',
    target: '_self',
    permission: MenuMapping.domain
  },
  {
    title: '接続先の割り当て',
    caption: '利用可能な接続先の設定',
    icon: 'assignment_ind',
    link: '/#/userDomain',
    target: '_self',
    permission: MenuMapping.userDomain
  },
  // {
  //   title:'Kintone ポータル',
  //   caption:'Kintone',
  //   icon:'cloud_queue',
  //   link:'https://mfu07rkgnb7c.cybozu.com/k/#/portal'
  // },
  // {
  //   title:'CUSTOMINE',
  //   caption:'gusuku',
  //   link:'https://app-customine.gusuku.io/drive.html',
  //   icon:'settings_suggest'
  // },
  // {
  //   title:'Kintone API ドキュメント',
  //   caption:'Kintone API',
  //   link:'https://cybozu.dev/ja/kintone/docs/',
  //   icon:'help_outline'
  // },
]);

const version = process.env.version;
const productName = process.env.productName;

onMounted(() => {
  authStore.setLeftMenu(!route.path.startsWith('/FlowChart/'));
});

function toggleLeftDrawer() {
  getCurrentInstance();
  authStore.toggleLeftMenu();
}
</script>
