<!--
@license GNU AGPL version 3 or any later version

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
  <div
    id="side-menu"
    class="side-menu-with-categories"
  >
    <div class="side-menu-header">
      <SettingsButton
        v-if="settings"
        :href="settings.href"
        :label="settings.name"
        :avatar="settings.avatar"
      />
      <AppSearch v-model:search="search" />
      <OpenerButton />
    </div>

    <div class="side-menu-categories-wrapper">
      <div class="side-menu-categories">
        <Loader v-if="!items.length" />

        <template
          v-for="(category, key) in items"
          :key="key"
        >
          <div
            v-if="containsAppsMatchingSearch(category.apps, search)"
            class="side-menu-category"
          >
            <h2
              v-if="category.name != ''"
              class="side-menu-category-title"
            >
              {{ category.name }}
            </h2>

            <ul class="side-menu-apps-list">
              <template
                v-for="(app, appId) in category.apps"
                :key="appId"
              >
                <SideMenuBigApp
                  v-if="isAppMatchingSearch(app.name, search)"
                  :classes="{ 'side-menu-app': true, active: activeApp === appId }"
                  :icon="app.icon"
                  :label="app.name"
                  :href="app.href"
                  :target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
                />
              </template>
            </ul>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useNavStore } from '../store/nav.js'
import { useConfigStore } from '../store/config.js'
import { getActiveAppId } from '../lib/app.js'
import { containsAppsMatchingSearch, isAppMatchingSearch } from '../lib/search.js'

import OpenerButton from '../components/OpenerButton'
import SettingsButton from '../components/SettingsButton'
import Loader from '../components/Loader'
import AppSearch from '../components/AppSearch'
import SideMenuBigApp from '../components/SideMenuBigApp'

const items = ref([])
const activeApp = ref(null)
const targetBlankApps = ref([])
const settings = ref(null)
const search = ref('')

onMounted(() => {
  const config = useConfigStore.getConfig()

  targetBlankApps.value = config['target-blank-apps']
  settings.value = config['settings']

  items.value = useNavStore.getCategories()
  activeApp.value = getActiveAppId()
})
</script>
