<script setup>



const user = useSupabaseUser()
const router = useRouter()
const route = useRoute()
const supabase = useSupabaseClient()
const tenants = (await supabase.from("tenants").select()).data




const dataStore = useDataStore()
const {loaded} = storeToRefs(useDataStore())
const {fetchData} = dataStore
fetchData()

const navLinks = [
  {
    label: "Home",
    link: "",
    icon: 'i-heroicons-home'
  },
  {
    label: "Aufgaben",
    link: "tasks",
    icon: "i-heroicons-rectangle-stack"
  },
  {
    label: "Plantafel",
    link: "planningBoard",
    icon: "i-heroicons-calendar-days"
  },
  {
    label: "Kunden",
    link: "customers",
    icon: "i-heroicons-user-group"
  },
  {
    label: "Projekte",
    link: "projects",
    icon: "i-heroicons-clipboard-document-check"
  },
  {
    label: "Zeiterfassung",
    link: "timetracking",
    icon: "i-heroicons-clock"
  },
  {
    label: "Artikel",
    link: "products"
  },
  {
    label: "Dokumente",
    link: "documents",
    icon: "i-heroicons-document"
  },
  {
    label: "Inventar",
    link: "inventory"
  }
]

const linksForBreadcrumbs = ref([])

const generateLinks = () => {
  let pathSteps = route.fullPath.split("/")
  let returnArr = []

  pathSteps.forEach((step,index) => {

    let stepLink = navLinks.find(link => link.link == step)

    if(stepLink) {
      returnArr[index] = {
        label: stepLink.label,
        icon: stepLink.icon,
        to:  '/' + stepLink.link
      }
    }

    linksForBreadcrumbs.value = returnArr

  })



}

watch(
    () => route.path,
    () => {
      generateLinks()
    }
)
generateLinks()




const userTenant = ref({})
if(user) userTenant.value = tenants.find(tenant => tenant.id === user.value.app_metadata.tenant)
const userDropdownItems = [
    [
      {
        label: user.value ? user.value.email : "Profil",

      },/*{
        label: user ? userTenant.value.name : "",

      }*/
    ],
    [
      {
        label: "Logout",
        click: () => {

          router.push("/login")
        }
      }
    ]
]
</script>

<template>
  <UCard id="page">
    <template #header>
      <div id="menu">
        <router-link
            v-for="link in navLinks"
            :to="'/' + link.link"
            class="mr-2"
        >
          <UButton>{{link.label}}</UButton>
        </router-link>
        <!--<router-link to="/customers" class="mr-2"><UButton>Kunden</UButton></router-link>
        <router-link to="/projects" class="mr-2"><UButton>Projekte</UButton></router-link>
-
        <router-link to="/vendorinvoices" class="mr-2"><UButton>Eingangsrechnungen</UButton></router-link>

        <router-link to="/timetracking" class="mr-2"><UButton>Zeiterfassung</UButton></router-link>
        <router-link to="/products" class="mr-2"><UButton>Artikel</UButton></router-link>
        <router-link to="/documents" class="mr-2"><UButton>Dokumente</UButton></router-link>
        <router-link to="/inventory" class="mr-2"><UButton>Inventar</UButton></router-link>-->
        <UDropdown :items="userDropdownItems" :popper="{placement: 'bottom-start'}">
          <UButton color="white" label="Benutzer" trailing-icon="i-heroicons-chevron-down-20-solid" />
        </UDropdown>
      </div>
      <UBreadcrumb
          class="my-3"
          :links="linksForBreadcrumbs"
      />
    </template>
    <NuxtPage
      v-if="loaded"
    />
    <div
      v-else
    >
      <UProgress animation="carousel" />
    </div>
  </UCard>
</template>

<style >

  #page {
    width: 98vw;
    height: 95vh;
    margin:1em;
  }

  .listItem {
    padding: .1em;
    border: 1px solid grey;
    border-radius: 15px;
    margin-top: 1em;
  }
  .listItem:hover {
    border: 1px solid #69c350;
  }

</style>