<template>
  <div>
    <DefaultHeaderPage title="Dados da Unidade" />

    <CustomTabComponent
      v-model:active-tab="activeTab"
      :tabs="allTabs"
      class="q-mb-md"
    />

    <div v-if="unitId" :key="unitId">
      <UnitDataTab
        v-show="activeTab === 'unit_data'"
        :unit-id="unitId"
      />

      <PartnersTab v-show="activeTab === 'partners'" :unit-id="unitId" />

      <ContractsTab v-show="activeTab === 'contracts'" :unit-id="unitId" />

      <FinancialTab
        v-if="canViewFinancial"
        v-show="activeTab === 'financial'"
        :unit-id="unitId"
      />

      <HistoryTab v-show="activeTab === 'history'" :unit-id="unitId" />

      <MediasTab v-show="activeTab === 'medias'" :unit-id="unitId" />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { userStore } from "src/stores/user";
import { permissionStore } from "src/stores/permission";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import CustomTabComponent from "src/components/shared/CustomTabComponent.vue";

import ContractsTab from "src/pages/unit/tabs/ContractsTab.vue";
import FinancialTab from "src/pages/unit/tabs/FinancialTab.vue";
import HistoryTab from "src/pages/unit/tabs/HistoryTab.vue";
import MediasTab from "src/pages/unit/tabs/MediasTab.vue";
import PartnersTab from "src/pages/unit/tabs/PartnersTab.vue";
import UnitDataTab from "src/pages/unit/tabs/UnitDataTab.vue";

const store = userStore();
const permissions = permissionStore();
const canViewFinancial = computed(() =>
  permissions.getAccess("franchisee_financial", "view"),
);

const activeTab = ref("unit_data");

const unitId = computed(() => store.selectedUnit?.id ?? null);

const allTabs = computed(() => [
  { name: "unit_data", label: "Dados da Unidade" },
  { name: "partners", label: "Sócios" },
  { name: "contracts", label: "Contratos" },
  ...(canViewFinancial.value
    ? [{ name: "financial", label: "Financeiro" }]
    : []),
  { name: "history", label: "Histórico" },
  { name: "medias", label: "Mídias" },
]);
</script>
