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

    <q-tab-panels
      v-model="tabSelect"
      animated
      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">
        <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="w100 flex column"
            >
            <template #default>
              <div class="flex column items-center">
                <q-icon :name="tab.icon" size="sm">
                  <q-badge
                    color="brand" align="top"
                    rounded floating
                    style="font-style: normal;"
                    >
                    {{ currentProject?.[tab.name as keyof typeof currentProject] ?? 0 }}
                  </q-badge>
                </q-icon>
                <span class="text-caption">{{$t(tab.label)}}</span>
              </div>
            </template>
          </q-route-tab>
        </q-tabs>
      </q-footer>
    </template>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { ref, onBeforeMount, computed } from 'vue'
  import { useProjectsStore } from 'stores/projects'
  import projectPageHeader from 'pages/project-page/ProjectPageHeader.vue' 
  import { useRoute } from 'vue-router'

  const route = useRoute()

  const projectStore = useProjectsStore()
  const currentProject = computed(() => projectStore.getCurrentProject() )

  const tabs = [
    {name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', to: { name: 'chats'} },
    {name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', to: { name: 'persons'} },
    {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', to: { name: 'companies'} },
  ]

  const tabSelect = ref<string>()

  onBeforeMount(() => {
    const initialTab = tabs.find(t => t.to.name === route.name)?.name || tabs[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>
