<script setup>


const dataStore = useDataStore()
const colorMode = useColorMode()
const { isHelpSlideoverOpen } = useDashboard()
const supabase = useSupabaseClient()
const router = useRouter()
const route = useRoute()

console.log("2.")

dataStore.initializeData((await supabase.auth.getUser()).data.user.id)


/*const isLight = computed({
  get() {
    return colorMode.value !== 'dark'
  },
  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})

const navLinks = [
  {
    label: "Home",
    to: "/",
    icon: 'i-heroicons-home'
  },
  {
    label: "Kontakte",
    icon: 'i-heroicons-user-group',
    children: [
      {
        label: "Kunden",
        to: "/customers",
        icon: "i-heroicons-user-group"
      },
      {
        label: "Lieferanten",
        to: "/vendors",
        icon: "i-heroicons-truck"
      },
      {
        label: "Ansprechpartner",
        to: "/contacts",
        icon: "i-heroicons-user-group"
      },
    ]
  },
  {
    label: "Buchhaltung",
    icon: 'i-heroicons-document-chart-bar',
    children: [
      {
        label: "Belege",
        to: "/receipts",
        icon: "i-heroicons-document-text"
      },
      {
        label: "Bank",
        to: "/banking",
        icon: "i-heroicons-currency-euro"
      },
    ]
  },
  {
    label: "Aufträge",
    icon: "i-heroicons-square-3-stack-3d",
    children: [
      {
        label: "Projekte",
        to: "/projects",
        icon: "i-heroicons-clipboard-document-check"
      },
      {
        label: "Verträge",
        to: "/contracts",
        icon: "i-heroicons-clipboard-document"
      },
      {
        label: "Objekte",
        to: "/plants",
        icon: "i-heroicons-clipboard-document"
      },
    ]
  },
  {
    label: "Verwaltung",
    icon: "i-heroicons-square-3-stack-3d",
    children: [
      {
        label: "Aufgaben",
        to: "/tasks",
        icon: "i-heroicons-rectangle-stack"
      },
      {
        label: "Plantafel",
        to: "/calendar/timeline",
        icon: "i-heroicons-calendar-days"
      },
      {
        label: "Kalender",
        to: "/calendar/grid",
        icon: "i-heroicons-calendar-days"
      },
      {
        label: "Dokumente",
        to: "/documents",
        icon: "i-heroicons-document"
      },
      {
        label: "E-Mail",
        to: "/email",
        icon: "i-heroicons-envelope"
      },
    ]
  },/!*
  {
    label: "Chat",
    to: "/chat",
    icon:'i-heroicons-chat-bubble-left-right'
  },*!/
  {
    label: "Mitarbeiter",
    icon: 'i-heroicons-user',
    children: [
      {
        label: "Zeiterfassung",
        to: "/employees/timetracking",
        icon: "i-heroicons-clock"
      },
      {
        label: "Anwesenheiten",
        to: "/workingtimes",
        icon: "i-heroicons-clock"
      },
      {
        label: "Abwesenheiten",
        to: "/absenceRequests",
        icon: "i-heroicons-document-text"
      }
    ]
  },
  {
    label: "Lager",
    icon: 'i-heroicons-home',
    children: [
      {
        label: "Steuerung",
        to: "/inventory",
        icon: "i-heroicons-square-3-stack-3d"
      },
      {
        label: "Artikelstamm",
        to: "/products",
        icon: "i-heroicons-puzzle-piece"
      },
      {
        label: "Lagerplätze",
        to: "/spaces",
        icon: "i-heroicons-square-3-stack-3d"
      },
      {
        label: "Fahrzeuge",
        to: "/vehicles",
        icon: "i-heroicons-truck"
      }, {
        label: "Inventar",
        to: "/inventoryitems",
        icon: "i-heroicons-puzzle-piece"
      },
    ]
  },
]*/

//const activeFeatures = dataStore.tenants.find(dataStore.currentTenant).features

let links = computed(() => {
  return [
    {
      id: 'dashboard',
      label: "Dashboard",
      to: "/",
      icon: "i-heroicons-home"
    },
    {
      label: "Organisation",
      icon: "i-heroicons-rectangle-stack",
      defaultOpen: false,
      children: [
        {
          label: "Aufgaben",
          to: "/tasks",
          icon: "i-heroicons-rectangle-stack"
        },
        ... dataStore.ownTenant.features.planningBoard ? [{
          label: "Plantafel",
          to: "/calendar/timeline",
          icon: "i-heroicons-calendar-days"
        }] : [],
        ... dataStore.ownTenant.features.calendar ? [{
          label: "Kalender",
          to: "/calendar/grid",
          icon: "i-heroicons-calendar-days"
        }] : [],
        ... dataStore.ownTenant.features.calendar ? [{
          label: "Termine",
          to: "/events",
          icon: "i-heroicons-calendar-days"
        }] : [],
        {
          label: "Dokumente",
          to: "/documents",
          icon: "i-heroicons-document"
        },
      ]
    },
    /*{
      label: "E-Mail",
      to: "/email",
      icon: "i-heroicons-envelope"
    },*/
    ... dataStore.ownTenant.features.contacts ? [{
      label: "Kontakte",
      defaultOpen: false,
      icon: "i-heroicons-user-group",
      children: [
        {
          label: "Kunden",
          to: "/customers",
          icon: "i-heroicons-user-group"
        },
        {
          label: "Lieferanten",
          to: "/vendors",
          icon: "i-heroicons-truck"
        },
        {
          label: "Ansprechpartner",
          to: "/contacts",
          icon: "i-heroicons-user-group"
        },
      ]
    },] : [],
    {
      label: "Mitarbeiter",
      defaultOpen:false,
      icon: "i-heroicons-user-group",
      children: [
        ... dataStore.ownTenant.features.timeTracking ? [{
          label: "Zeiterfassung",
          to: "/employees/timetracking",
          icon: "i-heroicons-clock"
        }] : [],
        ... dataStore.ownTenant.features.workingTimeTracking ? [{
          label: "Anwesenheiten",
          to: "/workingtimes",
          icon: "i-heroicons-clock"
        }] : [],
        {
          label: "Abwesenheiten",
          to: "/absenceRequests",
          icon: "i-heroicons-document-text"
        },
      ]
    },
    ... dataStore.ownTenant.features.accounting ? [{
      label: "Buchhaltung",
      defaultOpen: false,
      icon: "i-heroicons-chart-bar-square",
      children: [
        {
          label: "Ausgangsbelege",
          to: "/createDocument",
          icon: "i-heroicons-document-text"
        },{
          label: "Eingangsbelege",
          to: "/incomingInvoices",
          icon: "i-heroicons-document-text"
        },
        {
          label: "Bank",
          to: "/banking",
          icon: "i-heroicons-document-text"
        },
      ]
    },] : [],
    ... dataStore.ownTenant.features.inventory ? [{
      label: "Lager",
      icon: "i-heroicons-puzzle-piece",
      defaultOpen: false,
      children: [
        {
          label: "Vorgänge",
          to: "/inventory",
          icon: "i-heroicons-square-3-stack-3d"
        },{
          label: "Bestände",
          to: "/inventory/stocks",
          icon: "i-heroicons-square-3-stack-3d"
        },
        {
          label: "Lagerplätze",
          to: "/spaces",
          icon: "i-heroicons-square-3-stack-3d"
        },
      ]
    },] : [],
    {
      label: "Inventar",
      to: "/inventoryitems",
      icon: "i-heroicons-puzzle-piece"
    },
    ... dataStore.ownTenant.features.vehicles ? [{
      label: "Fahrzeuge",
      to: "/vehicles",
      icon: "i-heroicons-truck",
    }] : [],
    {
      label: "Stammdaten",
      defaultOpen: false,
      icon: "i-heroicons-clipboard-document",
      children: [
        {
          label: "Artikelstamm",
          to: "/products",
          icon: "i-heroicons-puzzle-piece"
        },{
          label: "Leistungsstamm",
          to: "/services",
          icon: "i-heroicons-puzzle-piece"
        },

      ]
    },
    ... dataStore.ownTenant.features.projects ? [{
      label: "Projekte",
      to: "/projects",
      icon: "i-heroicons-clipboard-document-check"
    },] : [],
    ... dataStore.ownTenant.features.contracts ? [{
      label: "Verträge",
      to: "/contracts",
      icon: "i-heroicons-clipboard-document"
    }] : [],
    ... dataStore.ownTenant.features.objects ? [{
      label: "Objekte",
      to: "/plants",
      icon: "i-heroicons-clipboard-document"
    },] : [],

    {
      label: "Einstellungen",
      defaultOpen: false,
      icon: "i-heroicons-cog-8-tooth",
      children: [
        {
          label: "Nummernkreise",
          to: "/settings/numberRanges",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Mitarbeiter",
          to: "/profiles",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Bankkonten",
          to: "/settings/banking",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Text Vorlagen",
          to: "/settings/texttemplates",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Firmeneinstellungen",
          to: "/settings/tenant",
          icon: "i-heroicons-clipboard-document-list"
        },{
          label: "Reparaturprozesse",
          to: "/repairs/prozess/",
          icon: "i-heroicons-bars-3-solid"
        }
      ]
    },
  ]
})

const actions = [
  {
    id: 'new-customer',
    label: 'Kunde hinzufügen',
    icon: 'i-heroicons-user-group',
    to: "/customers/create" ,
  },
  {
    id: 'new-vendor',
    label: 'Lieferant hinzufügen',
    icon: 'i-heroicons-truck',
    to: "/vendors/create" ,
  },
  {
    id: 'new-contact',
    label: 'Ansprechpartner hinzufügen',
    icon: 'i-heroicons-user-group',
    to: "/contacts/create" ,
  },
  {
    id: 'new-task',
    label: 'Aufgabe hinzufügen',
    icon: 'i-heroicons-rectangle-stack',
    to: "/tasks/create" ,
  },
  {
    id: 'new-plant',
    label: 'Objekt hinzufügen',
    icon: 'i-heroicons-clipboard-document',
    to: "/plants/create" ,
  },
  {
    id: 'new-product',
    label: 'Artikel hinzufügen',
    icon: 'i-heroicons-puzzle-piece',
    to: "/products/create" ,
  },
  {
    id: 'new-project',
    label: 'Projekt hinzufügen',
    icon: 'i-heroicons-clipboard-document-check',
    to: "/projects/create" ,
  }
]


const groups = computed(() =>
    [{
      key: 'actions',
      commands: actions
    },{
      key: "customers",
      label: "Kunden",
      commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
    },{
      key: "vendors",
      label: "Lieferanten",
      commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
    },{
      key: "contacts",
      label: "Ansprechpartner",
      commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
    },{
      key: "products",
      label: "Artikel",
      commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
    },{
      key: "tasks",
      label: "Aufgaben",
      commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
    },{
      key: "plants",
      label: "Objekte",
      commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
    },{
      key: "projects",
      label: "Projekte",
      commands: dataStore.projects.map(item => { return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}})
    }
    ].filter(Boolean))
const footerLinks = [/*{
  label: 'Invite people',
  icon: 'i-heroicons-plus',
  to: '/settings/members'
}, */{
  label: 'Hilfe & Support',
  icon: 'i-heroicons-question-mark-circle',
  click: () => isHelpSlideoverOpen.value = true
}]


</script>

<template>
  <UDashboardLayout  v-if="dataStore.loaded">

    <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
      <UDashboardNavbar class="!border-transparent" :ui="{ left: 'flex-1' }">
        <template #left>
          <ProfileDropdown class="w-full" />
        </template>
      </UDashboardNavbar>

      <UDashboardSidebar id="sidebar">
        <template #header>
          <UDashboardSearchButton label="Suche..."/>
        </template>

        <UDashboardSidebarLinks :links="links">

        </UDashboardSidebarLinks>

<!--        <UAccordion
          :items="links"
        >

        </UAccordion>-->


        <div class="flex-1" />

        <UDashboardSidebarLinks :links="footerLinks" />

        <UDivider class="sticky bottom-0" />

        <template #footer>
          <!-- ~/components/UserDropdown.vue -->
          <UserDropdown />
        </template>
      </UDashboardSidebar>
    </UDashboardPanel>

    <UDashboardPage>
      <UDashboardPanel grow>
        <slot />
      </UDashboardPanel>
    </UDashboardPage>



    <!-- ~/components/HelpSlideover.vue -->
    <HelpSlideover />
    <!-- ~/components/NotificationsSlideover.vue -->
    <NotificationsSlideover />

    <ClientOnly>
      <LazyUDashboardSearch :groups="groups" />
    </ClientOnly>
  </UDashboardLayout>
  <div
      v-else
      class="flex flex-col"
  >
    <UColorModeImage
      light="/Logo.png"
      dark="/Logo_Dark.png"
      class="w-1/3 mx-auto my-10"
    />
    <div v-if="dataStore.showProfileSelection">
      <ProfileSelection/>
    </div>
    <div v-else>


      <UProgress animation="carousel" class="w-3/4 mx-auto mt-10" />
    </div>

  </div>

</template>

<style scoped>
.testclass {
  color: red;
}
</style>