<template>
  <pn-page-card>
    <template #title>
      <project-page-header/>
    </template>

    <q-tab-panels
      v-model="tabSelect"
      keep-alive
      class="tab-panel-color full-height-panel w100 flex column col-grow no-scroll"
      >
      <q-tab-panel
        v-for="tab in tabs"
        :key="tab.name"
        :name="tab.name"
        class="q-pa-none flex column col-grow no-scroll"
        style="flex-grow: 2"
        >
        <router-view/>
      </q-tab-panel>
    </q-tab-panels>
    <template #footer>
      <q-footer class="bg-grey-1 text-grey main-content">
        <q-tabs
          style = "z-index: 1000"
          v-model="tabSelect"
          dense
          align="justify"
          id="tabs"
          >
          <q-route-tab
            v-for="tab in tabs"
            :to="tab.to"
            :name="tab.name"
            :key="tab.name"
            no-caps
            dense
            :class="tabSelect === tab.name ? 'active' : ''"
            class="flex column w100"
            >
            <template #default>
              <div class="flex column items-center">
                <q-icon :name="tab.icon" :size="maxTabWidth < baseTabWidth ? 'sm' : 'md'"/>
                <div
                  class="text-caption flex justify-center"
                  :style="{ width: (baseTabWidth - 32) + 'px'}"
                  v-if="maxTabWidth < baseTabWidth"
                  >
                  <span>
                    <q-resize-observer @resize="size => tab.width = size.width"/>
                    {{$t(tab.label)}}
                  </span>
                </div>
              </div>
            </template>
          </q-route-tab>
          <q-resize-observer @resize="size => tabsWidth = size.width" />
        </q-tabs>
      </q-footer>
    </template>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { ref, onBeforeMount, computed } from 'vue'
  import { useChatsStore } from 'stores/chats'
  import { useCompaniesStore } from 'stores/companies'
  import { useUsersStore } from 'stores/users'
  import projectPageHeader from 'pages/project-page/ProjectPageHeader.vue' 
  import { useRoute } from 'vue-router'

  const route = useRoute()

  const chatsStore = useChatsStore()
  const usersStore = useUsersStore()
  const companiesStore = useCompaniesStore()

  const chatsQty = computed(() => chatsStore.getChats.length)
  const usersQty = computed(() => usersStore.getUsers.length)
  const companiesQty = computed(() => companiesStore.getCompanies.length)

  const tabs = ref([
    {name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', to: { name: 'chats'}, qty: chatsQty.value, width: 0 },
    {name: 'users', label: 'project__users', icon: 'mdi-account-outline', to: { name: 'users'}, qty: usersQty.value, width: 0 },
    {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', to: { name: 'companies'}, qty: companiesQty.value, width: 0 }
  ])

  // hidden icon name if overflow - with resize-observer
  const tabsWidth = ref(0)
  const baseTabWidth = computed(() => Math.floor(tabsWidth.value / 3))
  const maxTabWidth = computed(() => Math.max(...tabs.value.map(el => el.width)))

  const tabSelect = ref<string>()

  onBeforeMount(() => {
    const initialTab = tabs.value.find(t => t.to.name === route.name)?.name || tabs.value[0]?.name || ''
    tabSelect.value = initialTab
  })

</script>

<style>
  .active {
    color: var(--q-primary)
  }

  .tab-panel-color {
    background: transparent
  }

  .full-height-panel > .q-panel {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
    width: 100%
  }

</style>

<style scoped>
#tabs :deep(.q-tab__indicator) {
  height: 3px !important;
}
</style>
