<script setup>

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

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 showUserMenu = ref(false)
const userMenuItems = ref([
  /*{
    label: "Profil",
    badge: dataStore.notifications.filter(item => item.read).length,
    icon: "i-heroicons-user-20-solid"
  },*/
  {
    label: "Nummernkreise",
    icon: "i-heroicons-cog-8-tooth",
    to: "/settings/numberRanges"
  },
  {
    label: "Einstellungen",
    icon: "i-heroicons-cog-8-tooth",
    to: "/settings"
  },
  {
    label: 'Benutzer',
    icon: 'i-heroicons-user-group',
    to: "/users"
  }
])

const linksold = [[{
  label: "Dashboard",
  to: "/",
  icon: "i-heroicons-home"
}],
  [{
  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: "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: "Belege",
  to: "/receipts",
  icon: "i-heroicons-document-text"
},
 /* {
    label: "Bank",
    to: "/banking",
    icon: "i-heroicons-currency-euro"
  }*/], [{
  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: "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: "Steuerung",
  to: "/inventory",
  icon: "i-heroicons-square-3-stack-3d"
},
  {
    label: "Artikelstamm",
    to: "/products",
    icon: "i-heroicons-puzzle-piece"
  },{
    label: "Leistungsstamm",
    to: "/services",
    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"
  },],[{
  label: "Einstellungen",
  to:"/settings",
  icon: "i-heroicons-cog-8-tooth"
}]
]

let links = [
    {
      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"
        },
        {
          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: "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: [
        {
          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-puzzle-piece",
      defaultOpen: false,
      children: [
        {
          label: "Steuerung",
          to: "/inventory",
          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"
        },
      ]
    },
    {
      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"
        },{
          label: "Fahrzeuge",
          to: "/vehicles",
          icon: "i-heroicons-truck"
        },
      ]
    },
    {
      label: "Belege",
      to: "/receipts",
      icon: "i-heroicons-document-text"
    },{
      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"
    },
  ]

const groups = [{
  key: 'links',
  label: 'Go to',
  commands: links.map(link => ({ ...link, shortcuts: link.tooltip?.shortcuts }))
}, {
  key: 'code',
  label: 'Code',
  commands: [{
    id: 'source',
    label: 'View page source',
    icon: 'i-simple-icons-github',
    click: () => {
      window.open(`https://github.com/nuxt-ui-pro/dashboard/blob/main/pages${route.path === '/' ? '/index' : route.path}.vue`, '_blank')
    }
  }]
}]
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>
          <TeamsDropdown />
        </template>
      </UDashboardNavbar>

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

        <UDashboardSidebarLinks :links="links" />

<!--
        <UDivider />

        <UDashboardSidebarLinks :links="[{ label: 'Colors', draggable: true, children: colors }]" @update:links="colors => defaultColors = colors" />

-->
        <div class="flex-1" />

        <UDashboardSidebarLinks :links="footerLinks" />

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

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

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

    <ClientOnly>
      <LazyUDashboardSearch :groups="groups" />
    </ClientOnly>
  </UDashboardLayout>
  <div
      v-else
      class="flex-col mx-auto my-auto mt-10 w-3/4"
  >
    <img
        :src="!isLight  ? '/spaces.svg' : '/spaces_hell.svg'"
        alt="Logo"
        class="w-1/3 mx-auto"
    />
    <UProgress animation="carousel"/>
  </div>

</template>

<style scoped>

</style>